我在使用 IE9(和 8)时遇到了在图像上定位空(有点) anchor 元素的问题。 anchor 包含文本，但它是使用 CSS 的 text-indent 属性从页面中拉出的。
我正在开发一个具有一系列促销面板的网站，它们都包含在 UL 中。每个 LI 内都有一个宣传图像，以及位于其不同区域的 1 个或多个 anchor 元素。 IMG和A元素绝对位于LI元素中。因此，基本结构如下:UL > LI > IMG A A A。
此设置在 Firefox 和 Chrome 中运行良好，但 IE 不喜欢它。我尝试在此设置中使用 z-index，但没有成功。
任何人都可以解释 IE 遇到的问题，并为我的 CSS 提供更好的解决方案吗？ 我使用 div、img 和单个 anchor 制作了一个快速/简化的示例来解决我的问题。可以将其复制/粘贴到您的计算机上以查看其实际情况。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<meta name="Description" content="" />
<meta http-equiv="Content-type" content="text/html;charset=UTF-8" />
<link type="text/css" rel="stylesheet" href="" />
<style type="text/css">
#div {
z-index:1;
display: block;
background:red;
position:relative;
}
#image {
z-index:2;
position:absolute;
top:0;
left:0;
display:block;
}
#anchor {
z-index:3;
display:block;
overflow:hidden;
position: absolute;
top:0;
left:0;
text-indent:-9999px;
width:640px;
height:480px;
}
</style>
</head>
<body>
<div id="div">
<img id="image" src="http://farm8.staticflickr.com/7130/7438112718_2e8340081b_z.jpg" />
<a href="#" id="anchor">clicky</a>
</div>
</body>
</html>
我对 UL > LI > IMG A 布局没有太多控制权。这样设置后，当我们获得新的宣传片时，我们可以轻松更新图像，并且只需根据图像有多少“号召性用语”轻松添加或删除 anchor 即可。 A 元素的定位是内联注入(inject)的。
谢谢!
最佳答案
我也遇到了同样的问题。使用您的示例，这是我的解决方案:
<style type="text/css">
#div {
position:relative;
}
#anchor {
display:block;
width:640px;
height:480px;
overflow:hidden;
text-indent:-9999px;
position:absolute;
top:0;
left:0;
background:url(http://farm8.staticflickr.com/7130/7438112718_2e8340081b_z.jpg) no-repeat 640px 480px;
}
</style>
<div id="div">
<img id="image" src="http://farm8.staticflickr.com/7130/7438112718_2e8340081b_z.jpg" />
<a href="#" id="anchor">clicky</a>
</div>
由于 anchor 标记具有固定的宽度和高度，并且隐藏了溢出，因此将 anchor 标记的背景图像设置为它绝对定位的图像(或您已经包含的任何图像)，但将背景位置设置为正像素值大于 anchor 的宽度和高度以及背景重复到不重复。通过这样做， anchor 标记可以在 IE 中工作，并且浏览器不会下载额外的资源，因此您可以节省带宽。注意:img标签不需要任何特殊的样式，并且包含的div只需要相对位置。
如果您不想担心设置背景位置，无法控制任何动态生成的图像的大小，和/或不关心节省带宽，您还可以创建并使用小 (1x1) 清晰/透明图像(如有必要，设置背景重复)。
或者，增强 Billy Moat 的 fiddle 示例:http://jsfiddle.net/7NpLq/29/
关于html - IE 将 anchor 元素定位在图像上，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/11703068/