css - 当我添加首字母 CSS 时，IE 中的导航停止工作

Question

我正在处理我的网站导航并想设计我的幻灯片导航栏的第一个字母。

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

在 Firefox 中，首字母样式不起作用，但是这个问题并不那么严重，因为导航仍然有效。

我的主要问题是针对 IE。在 Explorer 中，当首字母样式没有 CSS 时，导航功能会很流畅。但是，一旦我添加此代码，导航就不再有效。

如果有人有任何提示，我将不胜感激。

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

click here to view code

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) 鼓励网络作者使用双冒号形式的::first-letter 伪元素。有关详细信息，请参阅 W3C 的 CSS3 选择器规范的伪元素部分。