Html IE将锚元素定位在图像上
我对IE9（和IE8）在图像上定位空（有点像）锚元素有问题。锚点包含文本，但它是使用CSS的文本缩进属性从页面开始的 我在一个网站上工作，这个网站有一系列的宣传板，它们都包含在UL中。在每个LI中都有一个宣传图像，以及一个或多个定位在不同区域的锚元素。IMG和A元素绝对位于LI元素中。因此，基本结构看起来像UL>LI>imga 这种设置在Firefox和Chrome中运行良好，但IE不喜欢。我尝试在这个设置上使用z-index，但没有成功 有人能解释IE存在的问题，并为我的CSS提供更好的解决方案吗？我用一个div、img和一个锚点快速/简化了我的问题。可以将其复制/粘贴到您的机器上，以查看其运行情况Html IE将锚元素定位在图像上,html,css,internet-explorer,xhtml,Html,Css,Internet Explorer,Xhtml,我对IE9（和IE8）在图像上定位空（有点像）锚元素有问题。锚点包含文本，但它是使用CSS的文本缩进属性从页面开始的 我在一个网站上工作，这个网站有一系列的宣传板，它们都包含在UL中。在每个LI中都有一个宣传图像，以及一个或多个定位在不同区域的锚元素。IMG和A元素绝对位于LI元素中。因此，基本结构看起来像UL>LI>imga 这种设置在Firefox和Chrome中运行良好，但IE不喜欢。我尝试在这个设置上使用z-index，但没有成功 有人能解释IE存在的问题，并为我的CSS提供更好的解决方
<!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>
#div{
z指数：1；
显示：块；
背景：红色；
位置：相对位置；
}
#形象{
z指数：2；
位置：绝对位置；
排名：0；
左：0；
显示：块；
}
#锚定{
z指数：3；
显示：块；
溢出：隐藏；
位置：绝对位置；
排名：0；
左：0；
文本缩进：-9999px；
宽度：640px；
高度：480px；
}
谢谢 我认为您可以使用一个普通的旧HTML图像映射来实现您想要的： 否则，这里有一把小提琴在做我认为你原本想做的事情：
我也有同样的问题。根据您的示例，我的解决方案如下：
<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>
#div{
位置：相对位置；
}
#锚定{
显示：块；
宽度：640px；
高度：480px；
溢出：隐藏；
文本缩进：-9999px；
位置：绝对位置；
排名：0；
左：0；
背景：url(http://farm8.staticflickr.com/7130/7438112718_2e8340081b_z.jpg)不重复640px 480px；
}
或者，增加Billy Moat的小提琴示例：这个问题也会影响IE10，但不会影响IE11。背景图像方法的替代方法是应用背景颜色：rgba（0,0,0,0）到锚点。请注意，这在IE8中不起作用，IE8不支持
rgba锚定