Question

突出显示当前页面的以下代码在FF中运行正常，但IE没有运气。

有没有已知的黑客攻击？我用Google搜索了一下但找不到任何东西。

.navigation a:link {color: #FFFF00; text-decoration:none;}
.navigation a:visited {color:#000000; text-decoration:none}
.navigation a:hover {color:#c1753e; text-decoration:none}  
.navigation a:active {color:#000000; text-decoration:none;} 

body#homepage a#home,
body#gallery a#gallery,
body#biography a#biography,
body#exhibitions a#exhibitions,
body#contact #acontact
{
color: #000000;
}

相应的HTML：

<body id="homepage">

        <ul>
        <li><a href="index.html" id="home">Home</a></li>
        <li><a href="gallery.html" id="gallery">Gallery</a></li>
        <li><a href="biography.html" id="biography">About the artist</a></li>
        <li><a href="exhibitions.html" id="exhibitions">Exhibitions</a></li>
        <li><a href="contact.html" id="contact">Contact</a></li>
        </ul>

...

Answer 1

有几个问题：

您不能在文档中拥有两个具有相同ID的元素，因此大多数选择器永远不会匹配有效HTML文档中的任何内容（无效文档会邀请不同浏览器以不同方式进行错误恢复）
当前链接和所有:visited链接均为黑色，那么您如何区分？
#acontact应为a#contact（上述重复ID问题除外）

Answer 2

可能是这个选择器吗？：

.navigation a:link {color: #FFFF00; text-decoration:none;}

老实说，我从没用过它。如果您只是拥有静态页面，那么最好的方法是在您正在使用的页面上添加一个类.current，然后就完成了。

Answer 3

你会做这样的事情：

body.homepage a.homepage {
    color:red;
}

对于导航中的每个链接。

也就是说，我会通过服务器端代码将“活动”类添加到当前活动的链接元素的类名中 - ＆gt;较简洁的CSS。

Answer 4

您没有任何带有导航类的内容，因此顶部的选择器对页面样式没有任何贡献，并且您正在复制ID。要么将ID更改为类，要么将主体上的ID重命名为gallerypage，novelpage等其他内容。

鉴于您专门调用IE，如果您在运行时使用Javascript更改body标签上的body标记的id，您可能会发现很难。当您更改父元素上的类时，IE可能难以识别子元素的样式更改。更改有关子元素的内容将强制IE识别更改。例如，您可以为所有受影响的元素添加一个虚拟类。

如果你走得那么远，那么你可能只想添加一个 .current 样式并将该类添加到相关链接中。当然，您需要从所有其他导航链接中删除当前类。

您也可能希望将样式更改为更明显的样式，例如打开边框，以帮助调试，因为您的样式存在其他问题，并且只是将颜色变黑可能是不明显的（特别是如果你得到的话）您的 .navigation 规则有效。

Answer 5

这样的技术绝对适用于所有浏览器。但是，正如您已经被告知的那样，您不能在同一页面中两次使用相同的ID。

解决这个问题的方法很简单：只需在正文和菜单上使用类似的ID，而不是相同的ID。该技术中没有任何要求ID相同的内容。

用于突出显示当前页面的代码，CSS不在IE上工作

5 个答案: