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

【问题标题】：navigation in IE stops working when I add first-letter CSS当我添加首字母 CSS 时，IE 中的导航停止工作
【发布时间】：2014-09-13 18:02:24
【问题描述】：

我正在处理我的网站导航，并想为我的幻灯片导航栏的第一个字母设置样式。

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

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

我的主要问题是 IE。在资源管理器中，当首字母样式没有 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);

【问题讨论】：

虽然我通常不订阅 2 列冒号方法，但我在 MSDN 的文档中阅读此内容：从 Internet Explorer 9 开始，::first-letter 伪元素需要两个冒号, 尽管单冒号形式仍然被识别并且行为与双冒号形式相同。 Microsoft 和万维网联盟 (W3C) 鼓励网络作者使用 ::first-letter 伪元素的两个冒号形式。有关详细信息，请参阅 W3C 的 CSS3 选择器规范的伪元素部分。
尤里卡！有效！太感谢了。我真的很感激

标签： css internet-explorer firefox navigation linked-list

【解决方案1】：

虽然我通常不订阅 2 列冒号方法，但我在 MSDN's docs 中阅读此内容：从 Internet Explorer 9 开始，::first-letter 伪元素需要两个冒号，尽管一个- 冒号形式仍可识别，其行为与双冒号形式相同。 Microsoft 和万维网联盟 (W3C) 鼓励网络作者使用 ::first-letter 伪元素的两个冒号形式。有关详细信息，请参阅 W3C 的 CSS3 选择器规范的伪元素部分。

【讨论】：