Question

我试图把一个图像（一顶帽子）放在字母上面＆＃34;你＆＃34;在＆＃34; blablablau＆＃34;。

我期望的结果是：

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

<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
}

问题在于，在不同设备中使用SAME浏览器（如chrome），我在margin-left中获得了不同的img-hat结果。

示例：在我的计算机中显示正确。在我的笔记本电脑中它也正确显示。但是，在另一台笔记本电脑（具有相同的屏幕分辨率）中，它会向右侧显示更多的帽子，如：

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

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

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中使用font-size和line-height。 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

如果您将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 4

为避免此类问题，我建议您使用像normalize.css这样的CSS重置，这样可以让浏览器更加一致地呈现所有元素。

获得所需结果的一种方法是尝试这样的事情：

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

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

/* 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 5

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

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

Answer 6

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

启动您的css文件

body {
    margin:0;
    padding:0
}

检查它是否有效

不同的＆＃34;保证金左边＆＃34;在不同设备中使用相同浏览器的结果

6 个答案: