Question

我正在HTML文件中开发一个页脚（简化，包含在下面）。我有两个链接，左边的图像叫做：

footer1
footer2

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

Answer 1

要从图像中删除边框

a img { border: 0 }

这不会影响您的文字链接

Answer 2

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

a img
{
border:0;
}

Answer 3

以下选择器：

div * p

匹配作为DIV元素的孙子或后来的后代的P元素。请注意，“*”两侧的空白区域不是通用选择器的一部分;白色空间是一个组合子，表明DIV必须是某个元素的祖先，并且该元素必须是P的祖先。

因此，

试

#footer1 * a{text-decoration:none;}

CSS：text-decoration：none;适用于Firefox，在IE 8中不起作用

3 个答案: