CSS邻近兄弟选择器 - IE8问题

Question

我正在使用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>

据说,当悬停在"悬停在我上面"时,应显示兄弟ul.它在Firefox中运行良好,但在IE8中完全没有.我确定我之前看过IE8中使用的'+'兄弟选择器,我哪里出错了？

Answer 1

您需要确保IE在标准模式下运行 - 放入这样的doctype:

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

从文档:

相邻的兄弟组合子是一个"加号"(+)字符,用于分隔两个简单的选择器.空白并不重要.

当"E + F"形式的选择器紧跟在文档树中的兄弟元素E之后,忽略非元素节点(例如文本节点和注释)时,它与元素F匹配.元素E和F必须共享相同的父级,E必须紧接在F之前.要匹配父级的第一个子级,请使用:first-child伪类.

注意 需要Windows Internet Explorer 7或更高版本.
注意 组合器仅在符合标准的模式下启用(严格!DOCTYPE).