Question

我在IE中的图像上放置简单文本时遇到了一些麻烦。图像的z-index低于文本，所以我不确定它是什么。我还尝试给文本一个相对位置而不是绝对位置。但它仍然无法正常工作。有人请任何想法吗？

由于

Answer 1

IE不处理标准状态的z-index。最好的解决方案是将图像作为background-image属性放到容器（例如div）和div中的文本中。这样所有浏览器都能识别正确的顺序。

第二个解决方案是将img和span（包含文本）放在具有以下属性的div中：

<div style="position:relative">
  <img src="a.jpg" style="position:absolute;" />
  <span style="position:absolute">your text here</span>
</div>

Answer 2

将图像和文本放在设置为“相对”位置的div容器中。将图像设置为“绝对”位置文本将出现在图像的顶部

要控制文本，请将其放在另一个div中，并使用margin属性移动它。

<div id="container" style="position: relative;">
     <img style="position: absolute;" src="#" />
     <div id="textcontainer" style="margin: 10px 10px 10px 10px">
          Text to float on image here
     </div>
</div>

不需要z-index :)不同版本的IE无论如何都不喜欢它。

Answer 3

<img src="myimage.jpg" title="Text over image here">

在IE中的图像上的文本麻烦

3 个答案: