3

我正在开发 HTML 文件中的页脚（简化，包括在下面）。我有两个链接，左侧的图像称为：

  • 页脚 1
  • 页脚2

在 Firefox 13 中，超链接的蓝线不会根据需要出现在这两个图像/链接周围。在 IE 8 中，尽管包含 css，但蓝线确实并且顽固地拒绝消失（请参阅下面的文件）：

 #footer1 a{text-decoration:none;}

我想让左侧两个图像/链接中的链接的蓝色链接消失，并在我的其他链接中保留文本装饰。

非常感谢您的帮助。

史蒂夫

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
    <title>Text Decoration Will Not Disappear In Two Left Images In IE 8</title>
    <style type ="text/css">
    #footer
    {
        background-image:url('../images/bg-texture.gif');
        padding: 20px;
        height: 50px;
        font-size:8pt;
    }
    #footer ul, li 
    {
        display: inline;
        float:left;
        list-style-type: none;
        vertical-align:top;
        text-align:left;
    }


    #footer1 {margin-right:10%;margin-left:5%;}
    #footer1 a{text-decoration:none;}
    #footer2{margin-right:10%;}
    #footer3{margin-right:10%;}
    #footer4{margin-right:10%;}
    #footer5{margin-right:10%;}

    </style>
</head>

    <body>

            <!-- The Footer -->
            <ul id="footer">
                <li id="footer1"><a href="http://slashdot.org"> <img alt="" src="files/doc.gif"/></a></li>
                <li id="footer2"><a href="http://google.com"><img alt="" src="files/noaa.gif"/></a></li>
                <li id="footer4"><a href="http://slashdot.org/">Right Link 1</a></li>
                <li id="footer5"><a href="http://google.com">Right Link 2</a></li>
            </ul>

</body>
</html>
4

3 回答 3

12

要从图像中删除边框，您应该这样做

a img { border: 0 }

这不会影响您的文本链接

于 2012-06-18T14:41:22.153 回答
2

作为链接的图像周围的蓝色是边框。所以设置这个应该没问题：

a img
{
border:0;
}
于 2012-06-18T14:42:35.990 回答
0

以下选择器：

div * p

匹配作为 DIV 元素的孙子或更高后代的 P 元素。注意“*”两边的空白不是通用选择器的一部分；空格是一个组合符，指示 DIV 必须是某个元素的祖先，并且该元素必须是 P 的祖先。

因此，

尝试

#footer1 * a{text-decoration:none;}
于 2012-06-18T14:44:40.253 回答