在不同的设备上使用相同的浏览器会产生不同的 "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

不同的机器有不同的分辨率，因此它们在处理图像和文本时的反应也不同。这符合预期。基本上，浏览器会尝试重新调整网站以适应查看设备。

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

Answer 2

如果将 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 3

我根本不希望图像出现在 HTML 中...它的样式应该出现在 CSS.

中

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

通过调整 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 4

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

开始你的 css 文件

body {
    margin:0;
    padding:0
}

检查是否有效

Answer 5

首先，你要绝对从右开始定位，而不是从左开始，因为你的字母在不同的设备上可能不完全一样。即使使用网络字体，每个带有字母的浏览器的显示也会略有不同。

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

这个Fiddle应该有帮助：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 6

为了避免此类问题，我真诚地建议您使用 CSS 重置，例如 normalize.css，这将使浏览器呈现所有元素更加一致。

获得您想要的结果的一种方法是尝试这样的事情：

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

在带有 position: relative 的父元素中使用带有 position: absolute 的 icon/image，这样您就可以更精确地控制图标的显示位置。您可以通过更改他的 top/right 或 bottom/left 声明来更改图标位置。

/* 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 上查看实际效果。

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

Different "margin-left" results with same browser in different devices

html

css

margin