Question

我遇到IE9（和8）的问题，在图像上定位空（有点）锚元素。锚点包含文本，但是使用CSS的text-indent属性将其踢出页面。

我正在一个有一系列促销面板的网站上工作，它们都包含在UL中。每个LI内部都有一个促销图像，一个或多个锚元素位于其不同区域。 IMG和A元素绝对位于LI元素中。因此，基本结构看起来像UL＆gt; LI> IMG A A A。

此设置在Firefox和Chrome中运行良好，但IE不喜欢它。我尝试在这个设置上使用z-index而没有运气。

任何人都可以解释IE所拥有的问题，并为我的CSS提供更好的解决方案吗？ 我使用div，img和单个锚点快速/简化了我的问题示例。可以将其复制/粘贴到您的计算机上以查看它的实际效果。

    <!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＆gt;没有多少控制权。 LI> IMG布局。这是设置，当我们获得新的促销时，我们可以轻松更新图像，并根据图像有多少“号召性用语”轻松添加或删除锚点。 A元素的定位是内联注入的。

谢谢！

Answer 1

我有同样的问题。使用您的示例，这是我的解决方案：

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

由于锚标签具有隐藏溢出的设置宽度和高度，因此将锚标记的背景图像设置为绝对定位的图像（或者您已经包含的任何图像），但是将背景位置设置为正像素值大于锚点的宽度和高度，背景重复到不重复。通过这样做，锚标签在IE中工作，并且浏览器不会下载额外的资源，因此您可以节省带宽。注意：img标签不需要任何特殊样式，包含div只需要相对位置。

如果您不想担心设置背景位置，无法控制任何动态生成的图像的大小，和/或不关心节省带宽，您还可以创建和使用小（1x1）透明/透明图像（必要时设置背景重复）。

或者，增加Billy Moat的小提琴示例：http://jsfiddle.net/7NpLq/29/

Answer 2

我认为您可以使用普通的旧HTML图像映射来实现您想要的内容：

http://www.w3schools.com/tags/tag_map.asp

否则，这是一个小提琴做我认为你原本想做的事情：

http://fiddle.jshell.net/7NpLq/

Answer 3

此问题也影响IE10，但不影响IE11。背景图像方法的替代方法是将background-color: rgba(0, 0, 0, 0);应用于锚点。请注意，这在IE8中不起作用，IE8不支持rgba色。

IE位置锚元素在图像上

3 个答案: