2

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

我正在一个有一系列促销面板的网站上工作，它们都包含在 UL 中。每个 LI 内部都有一个宣传图片，以及位于其不同区域的 1 个或多个锚元素。IMG 和 A 元素绝对定位在 LI 元素中。因此，基本结构看起来像 UL > LI > IMG 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 > LI > IMG A 布局没有太多控制权。这是设置，当我们获得新的促销时，我们可以轻松地更新图像，并且只需根据图像有多少“号召性用语”轻松添加或删除锚点。A 元素的定位是内联注入的。

谢谢！

4

3 回答 3

2

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

<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 ) 清晰/透明图像（必要时设置背景重复）。

或者，增加比利护城河的小提琴示例：http: //jsfiddle.net/7NpLq/29/

于 2013-01-10T19:40:35.487 回答
1

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

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

否则，这里有一个小提琴做我认为你最初试图做的事情：

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

于 2012-07-28T18:19:31.957 回答
0

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

于 2015-02-10T12:13:17.927 回答