Question

我正在使用我的网站导航，并希望设置滑动导航栏的第一个字母。

它在Chrome和Safari中运行良好，但我在IE和Firefox中遇到了两个错误。

在Firefox中，首字母样式不起作用，但是这个问题并不重要，因为导航功能仍在运行。

我的主要问题是IE。在资源管理器中，当没有用于第一个字母样式的CSS时，导航功能很流畅。但是，只要我添加此代码，导航就不再有效。

如果有人有任何提示，我将非常感谢您的反馈。

（请先在chrome或safari中打开以查看它的外观/功能）

HTML：

<div id="slide"> +PROJECTS
        <li><a href="#">community</a></li>
        <li><a href="#">high rise</a></li>
        <li><a href="#" >mid rise</a></li>
        <li><a href="#">low rise</a></li>
        <li><a href="#">commercial</a></li>
        <li><a href="#">institutional</a></li>

<div id="slide2"> +COMPANY
        <li><a href="index-gamma.html" target="_parent">company</a></li>
        <li><a href="index-newthumbnails.html" target="_parent">awards</a></li>
        <li><a href="#">people</a></li>
        <li><a href="#">contact</a></li></div>

CSS

#slide {
height: 15px;
width: 90px;
transition: width 500ms ease;
-moz-transition: width 500ms ease;
-ms-transition: width 500ms ease;
-o-transition: width 500ms ease;
-webkit-transition: width 500ms ease;
overflow: hidden;
float:right;
color:#808285;
font-size:14px;}

#slide:hover {
color:#000; }

#slide li {
display: inline;
padding-left: 10px;
font-size:12px; }

#slide2 {
height: 15px;
width: 90px;
transition: width 500ms ease;
-moz-transition: width 500ms ease;
-ms-transition: width 500ms ease;
-o-transition: width 500ms ease;
-webkit-transition: width 500ms ease;
overflow: hidden;
float:right;
color:#808285;
font-size:14px; }

#slide2:hover {
color:#000; }

#slide2 li {
display: inline;
padding-left: 10px;
font-size:12px; }

#slide:first-letter {
color:#000; }

#slide:hover:first-letter {
color:#f00; }

#slide2:first-letter {
color:#000; }

#slide2:hover:first-letter {
color:#f00; }

JQUERY

document.getElementById('slide').addEventListener('click', function () {

(this.style.width == '90px' || this.style.width == '') ? this.style.width = '563px' : this.style.width = '90px'; }, false);


document.getElementById('slide2').addEventListener('click', function () {

(this.style.width == '90px' || this.style.width == '') ? this.style.width = '291px' : this.style.width = '90px'; }, false);

Answer 1

虽然我通常不订阅2列冒号方法，但我在MSDN's docs中读到这个：从Internet Explorer 9开始，:: first-letter伪元素需要两个冒号，尽管单结肠形式仍然被识别，并且表现与双结肠形式相同。 Microsoft和万维网联盟（W3C）鼓励Web作者使用:: first-letter伪元素的双冒号形式。有关更多信息，请参阅W3C的CSS3选择器规范的伪元素部分。

当我添加第一个字母的CSS时，IE中的导航停止工作

1 个答案: