html - 不同设备中相同浏览器的不同 "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>

然后您可以调整边距或定位值以将其微调到合适的位置……甚至可以将其旋转到一个漂亮的 Angular 。 :)