0

我在使用 Internet Explorer 时遇到问题。我很想举手说我不想支持它，但这不是一个选择。基本上，我写了一个用于导航的无序列表。然后在另一个部分，使用另一个父级，我使用了另一个无序列表，但它从另一个 ID 继承了属性。它在所有其他浏览器中都可以正常工作。我剥离了页面的基本部分并将它们发布在下面。此外，我检查了 w3c css 验证器，我收到的警告说“在两个上下文#container 和 #stripes ul a:link 中颜色和背景颜色的颜色相同”。

你会看到如果你点击项目符号列表，它们的样式会像导航一样。但是，当我尝试更改项目符号列表时，它会影响导航！我尝试在主要内容中设置所有 a 属性，但随后它关闭了所有内容。

有人可以检查一下并提供帮助吗？它让我发疯！

<!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=utf-8" />
<title>2012 Summer Blood Challenge</title>
<style  type="text/css">

#stripes ul
{ font-size:13px;
list-style-type:none;
margin:0;
padding:0;
overflow:hidden;

}
#stripes li
{
float:left; 
}
#stripes ul a:link,a:visited
{
display:block;
width:128px;
font-weight:bold;
color:#FFFFFF; background-image:url(https://trigger.lwcdirect.com/LWC_00486/uploadImages/2012sbc/redbar.jpg);
 background-position: bottom;
text-align:center;
padding:4px;
text-decoration:none;
height:32px;
}
#stripes ul a:hover,a:active
{
background-image:url(https://trigger.lwcdirect.com/LWC_00486/uploadImages/2012sbc/darkredbar.jpg);
}

.roundside {
    background-image: url(https://trigger.lwcdirect.com/LWC_00486/uploadImages/2012sbc/goldboxes_02.jpg);
    background-repeat: repeat-y;
    width: 560px;
    text-align: left;
    padding: 0 30px 0 30px;
}

.roundside ul {list-style-type: none;
    margin: 0;
    padding: 0;}

.roundside li {background-image:url(https://trigger.lwcdirect.com/LWC_00486/uploadImages/2012sbc/drop.gif);

    background-repeat:no-repeat;
    padding:0 0 5px 16px; font-size:16px;}

.roundside ul a:link,a:visited,a:hover,a:active {color:#990000; font-weight:bold}


</style>
</head>
<body class="oneColFixCtrHdr">
<div id="largecontainer"><!--set centering-->
        <div id="container"><!--creates box-->
            <div id="stripes">

            <center>
            <ul>
                <li><a href="#">Promotional Materials</a></li>
                <li><a href="#" style="font-size:11px">Participating Employers and Results</a></li> 
                <li><a href="#">Newsletters</a></li>
                <li><a href="#">Give Blood</a></li>
                <li><a href="#">Become a Member</a></li>
            </ul>
            </center>

            </div><!--end stripes-->
            <div id="mainContent">
                    <div class="roundside">
                    <ul>
                        <li><a href="#">Official Rules and Point Structure</a></li>
                        <li><a href="#">Gage Flyer 8.5x11</a></li>
                        <li><a href="#">2012 SBC Hero Card</a></li>
                    </ul>
                 </div>
            </div> <!-- end #mainContent -->
            <div id="footer">&nbsp;
            </div><!-- end #footer -->
        </div><!--end container-->
    </div><!-- end #largecontainer -->
</body>
</html>
4

1 回答 1

7

你的第二个从ul里面.roundside拿起css的#stripes ul原因是因为下面的css

#stripes ul a:link,a:visited

你需要把它改成

#stripes ul a:link, #stripes ul a:visited

否则它将应用在它之后声明的样式到a:visited站点上的每个，而不仅仅是在#stripes ul

这也是#stripes ul a:hover,a:active需要将其更改为的情况，#stripes ul a:hover, #stripes ul a:hover a:active否则您将遇到相同的问题。

希望这可以解决您的问题。

编辑： MrSlayer 在我错过的评论中提出了一个很好的观点。

你也最好改变

.roundside ul a:link,a:visited,a:hover,a:active {color:#990000; font-weight:bold}

到

.roundside ul a:link, .roundside ul a:visited, .roundside ul a:hover, .roundside ul a:active {color:#990000; font-weight:bold}

以避免a将来出现任何令人讨厌的相关意外。在 CSS 中，设置样式时需要尽可能具体

于 2012-05-07T18:01:54.203 回答