在不同设备上使用相同的浏览器会产生不同的“margin-left”结果

Question

我正在尝试在单词“blablablau”中的字母“u”上方放置一个图像（一顶帽子）。

我期望的结果是：

我用这段代码解决了这个问题：

<img id="img-hat" src="hat.png">
<p id="title-bla">blablablau</p>

#img-hat {
    transform: rotate(25deg);
    position: absolute; 
    margin-left: 118px; 
    height: 23px; 
    width: 37px
}

#title-bla {
    margin-bottom: -5px; 
    font-weight: bold; 
    font-size: 170%; 
    margin-top: 2px; 
    font-family: 'Open Sans',sans-serif
}

问题是，在不同的设备上使用相同的浏览器（如 chrome），我在img-hat 中得到不同的margin-left 结果。

示例：在我的电脑上它显示正确。在我的笔记本电脑中，它也正确显示。但是，在另一台笔记本电脑（具有相同的屏幕分辨率）中，帽子显示得更靠右一点，就像这样：

这种行为在我的手机和我测试过的另一台电脑上继续存在。

为什么会发生这种情况，我该如何解决？

Answer 1

我不希望图像在 HTML 中...它是样式，所以它应该在 CSS 中。

所以，我使用 span 来包裹字母以接收帽子，给它一个类并将图像作为背景应用到定位的伪元素。

通过调整em 中所有内容的大小，帽子的大小将根据文本大小动态变化。

.title-bla {
  font-size: 24px;
  margin: 0;
}
.large {
  font-size: 72px;
}
.hat {
  position: relative;
}
.hat:after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  margin-top: -.25em;
  width: 1em;
  height: 1em;
  background-image: url(http://b.dryicons.com/images/icon_sets/christmas_surprise_four_in_one/png/128x128/santa_hat.png);
  background-size: cover;
  transform:rotate(15deg);
}

<p class="title-bla">blablabla<span class="hat">u</span>
</p>

<p class="title-bla large">blablabla<span class="hat">u</span>
</p>

然后您可以调整边距或定位值以将其轻推到位以适应...甚至将其旋转到一个轻松的角度。 :)

Answer 2

首先，您希望绝对从右侧定位，而不是从左侧定位，因为您的字母在不同设备中可能不完全相同。即使使用网络字体，每个带有字母的浏览器的显示也会略有不同。

其次，如果你想要它非常精确，那么你需要以 px 或 rems 为单位的字体大小和行高。 170% 可能略有不同，具体取决于各种设备的默认字体大小。此外，有时移动设备会调整短段落或长段落的字体大小。

这个小提琴应该有帮助：https://jsfiddle.net/cjc5myde/1/

#title-bla {
position:relative; top:-2px;
display:inline-block;
margin-bottom: -5px; 
font-weight: bold; 
font-family: 'Open Sans',sans-serif;
font-size: 28px; line-height:38px;  
}
#img-hat {
transform: rotate(25deg);
position: absolute; 
top:0; right:-25px; 
height: 23px; 
width: 37px
 }

Answer 3

为避免此类问题，我强烈建议您使用 normalize.css 之类的 CSS 重置，这将使浏览器更一致地呈现所有元素。

获得所需结果的一种方法是尝试以下方法：

<h1 class="title">Blumenau <i class="hat"></i></h1>

在带有position: relative 的父元素中使用带有position: absolute 的图标/图像，这样您就可以更精确地控制图标的显示位置。您可以通过更改其顶部/右侧或底部/左侧声明来更改图标位置。

/* Just to put away from the border to this example */
body {
    padding: 100px;
    font-family: sans-serif;
}
/*
    To avoid that margin and padding to be consider on the width and height set
*/
* { box-sizing: border-box; }
/*
    Parent
*/
.title {
    display: inline-block;
    position: relative;
    font-size: 32px;
}
/*
    Icon/image
*/
.hat{
    background: url('http://s23.postimg.org/os0nl4rrr/rsz_hat.png');        
    transform:rotate(15deg);
    top: -2px;
    right: -9px;
    width: 35px;
    height: 19px;
}
/**
 * Icon/image position
 */
.title i {
    display: inline-block;
    position: absolute;
}

在JSFiddle 上查看它的实际效果。

Answer 4

如果你把img标签放在p标签里面，它会自动放在文本的末尾。从那里，您可以将帽子相对于其原始位置定位。您可能需要稍微调整左值。

<p id="title-bla">blablablau<img id="img-hat" src="hat.png"></p>

#img-hat {
    transform: rotate(25deg);
    position: relative;
    left: -20px;
    height: 23px;
    width: 37px
}

Answer 5

不同的机器具有不同的分辨率，因此它们在处理图像和文本时的响应显示不同。这正如预期的那样。基本上，浏览器会尝试重新调整网站以适应查看设备。

话虽如此，您是否尝试将 z-index 添加到您的 img-hat。我个人不经常使用 z-index，但在这种情况下它可能会有所帮助。另一个选项你试过相对定位吗？

Answer 6

不同的浏览器有不同的默认填充和边距，当我们的样式未应用时，它们会使用它们。有时，最好将所有这些都降为 0。 用

开始你的 css 文件

body {
    margin:0;
    padding:0
}

检查是否有效