CSS相邻兄弟选择器 - IE8问题答案

【问题标题】：CSS adjacent sibling selectors - IE8 problemCSS相邻兄弟选择器 - IE8问题
【发布时间】：2009-10-23 18:40:11
【问题描述】：

我正在使用 UL/LI 结构创建菜单系统。我正在尝试将兄弟选择器用于悬停/显示子菜单。

我正在使用这个；

#MainMenu li.Sel ul li.HasSub a:hover+ul {
     display: block;
}

UL 结构是这样的；

<ul id='MainMenu'>
    <li class='Sel'>
    <a href='#'>Click Me</a>
        <ul>
            <li class='HasSub'>
                <a href='#'>Hover Over Me</a>
                <ul>
                    <li>Link</li>
                    <li>Link</li>
                </ul>
            </li>
        </ul>
    </li>
</ul>

假设，当悬停在“Hover Over Me”上时，应该显示兄弟 ul。它在 Firefox 中运行良好，但在 IE8 中根本不行。我确定我之前在 IE8 中使用过 '+' 兄弟选择器，我哪里出错了？

【问题讨论】：

标签： css siblings

【解决方案1】：

您需要确保 IE 在标准模式下运行 - 输入这样的文档类型：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
    "http://www.w3.org/TR/html4/loose.dtd">

来自the documentation：

相邻的兄弟组合符是一个“加号”(+) 字符，用于分隔两个简单的选择器。空格不重要。

“E+F”形式的选择器在文档树中紧跟在兄弟元素 E 之后的元素 F 匹配，忽略非元素节点（例如文本节点和 cmets）。元素 E 和 F 必须共享同一个父元素，并且 E 必须紧接在 F 之前。要匹配父元素的第一个子元素，请使用 :first-child 伪类。

注意需要 Windows Internet Explorer 7 或更高版本。
注意 组合器仅在符合标准的模式下启用（严格 !DOCTYPE）。强>

【讨论】：

哈。有趣的是，我放弃了 doctype，这样我就可以制作一个 iframe 100% 高度的表格单元格。谢谢，我想我将不得不单独尝试找出 100% 高度的东西。有任何想法吗？我将不得不使用 JS 来实现 IE6 菜单效果。干杯。

【解决方案2】：

在 li 元素上添加悬停并修复悬停会更简单，即使用此http://www.xs4all.nl/~peterned/csshover.html

即

#MainMenu li.Sel ul li.HasSub:hover {
     display: block;
}

希望有帮助

乔什

【讨论】：