Html 不同的；“左边距”；在不同设备中使用相同浏览器的结果

我试着在单词“blablau”中的字母“u”上方放一个图像（一顶帽子）

我预期的结果是：

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

等等

#img hat{
变换：旋转（25度）；
位置：绝对位置；
左边距：118px；
高度：23px；
宽度：37像素
}
#标题bla{
边缘底部：-5px；
字体大小：粗体；
字体大小：170%；
边缘顶部：2倍；
字体系列：“开放式Sans”，无衬线
}

问题是，在不同的设备中使用相同的浏览器（如chrome），我会得到不同的

左边距

结果，导致我的

img帽子

示例：在我的计算机中，它显示正确。在我的笔记本电脑上也能正确显示。但是，在另一台笔记本电脑（具有相同的屏幕分辨率）中，它将帽子显示得稍微偏右一些，如下所示：

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

---

为什么会发生这种情况？我如何解决这个问题？

不同的机器有不同的分辨率，因此它们在处理图像和文本时的响应会有所不同。这是意料之中的。基本上，浏览器会尝试重新调整网站以适应观看设备

---

也就是说，你有没有尝试过在你的img帽子上添加一个z索引。我个人不经常使用z-index，但在这种情况下，它可能会有所帮助。您尝试过相对定位吗？

如果您将

img

标记放在

p

标记内，它将自动放在文本的末尾。从那里，您可以相对于其原始位置定位帽子。您可能需要稍微调整左值

#img hat{
变换：旋转（25度）；
位置：相对位置；
左：-20px；
高度：23px；
宽度：37像素
}

我不希望图像出现在HTML中……因为它是样式化的，所以应该出现在CSS中

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

通过在

em

中调整所有内容的大小，帽子大小将随文本大小而动态变化

。标题bla{
字体大小：24px；
保证金：0；
}
.大{
字体大小：72px；
}
.帽子{
位置：相对位置；
}
.帽子：以后{
内容：''；
位置：绝对位置；
排名：0；
左：0；
边缘顶部：-.25em；
宽度：1米；
高度：1米；
背景图片：url(http://b.dryicons.com/images/icon_sets/christmas_surprise_four_in_one/png/128x128/santa_hat.png);
背景尺寸：封面；
变换：旋转（15度）；
}

bla

不同的浏览器有不同的默认填充和边距，当不应用我们的样式时，它们会使用这些填充和边距。有时候，最好把所有这些都降到0。 用以下命令启动css文件

正文{
保证金：0；
填充：0
}

---

检查它是否有效首先，你要绝对从右边定位，而不是从左边，因为你的字母在不同的设备中可能不完全相同。即使使用web字体，每个带有字母的浏览器的显示也略有不同

第二，如果您希望它非常精确，那么您需要px或rems中的字体大小和行高。170%可能略有不同，具体取决于各种设备的默认字体大小。此外，有时移动设备会调整短或长段落的字体大小

这把小提琴应该有助于：

---

为了避免此类问题，我真诚地建议您使用CSS重置，这样可以使浏览器更一致地呈现所有元素

要获得您想要的结果，一种方法是尝试以下方法：

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

---

请在上查看它的操作。

不起作用，一个

p

元素将伸展全宽。最好是

内联块

。我看不出这有什么区别，图像紧跟在文本之后，它不会粘在页面的右侧是的，你说得对。有一些不同的风格。非常感谢。它水平工作（帽子总是在“u”的上方）。然而，在垂直方向上，我仍然有一些不同的设备。在我的电脑里，它显示出我想要的样子，但在我的手机里，它显示的帽子稍微向下一点。注意：我将“.hat:after”改为“top:7；left:-5；”。下面是一张在我的手机中显示您自己的示例的图片：。您可以看到垂直方向上的帽子更高。我怀疑这是不同浏览器的默认线高度不同，请尝试显式设置它。是的，我已经这样做了，但它不起作用。另外，我的电脑、笔记本电脑和手机都使用相同的浏览器（chrome）。

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

/* 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;
}