Question

我遇到IE7主导航视图与this website

中所有其他浏览器的视图不一致

活动状态和悬停状态应完全覆盖棕褐色的黑色。另一个问题是当你将鼠标放在菜单上时，子导航背景会“跳跃”大约3px。

这是html：

<ul id="mainNav">
        <li><a class="selected" href="#">Home</a></li>
        <li>
            <span>
                <a href="#">Sub Item 1</a>
                <a href="#">Sub Item 2</a>
                <a href="#">Sub Item 3</a>
                <a href="#">Sub Item 4</a>
            </span>
        </li>   
        <li><a href="#">About Us</a>
            <span>
                <a href="#">Sub Item 1</a>
                <a href="#">Sub Item 2</a>
                <a href="#">Sub Item 3</a>
                <a href="#">Sub Item 4</a>
            </span>
        </li>   
        <li><a href="#">Home Remodels</a>
            <span>
                <a href="#">Sub Item 1</a>
                <a href="#">Sub Item 2</a>
                <a href="#">Sub Item 3</a>
                <a href="#">Sub Item 4</a>
            </span>
        </li>   
        <li><a href="#">New Home Builds</a>
            <span>
                <a href="#">Sub Item 1</a>
                <a href="#">Sub Item 2</a>
                <a href="#">Sub Item 3</a>
                <a href="#">Sub Item 4</a>
            </span>
        </li>   
        <li><a href="#">Our Portfolio</a>
            <span>
                <a href="#">Sub Item 1</a>
                <a href="#">Sub Item 2</a>
                <a href="#">Sub Item 3</a>
                <a href="#">Sub Item 4</a>
            </span>
        <li><a href="#">Our Blog</a>
            <span>
                <a href="#">Sub Item 1</a>
                <a href="#">Sub Item 2</a>
                <a href="#">Sub Item 3</a>
                <a href="#">Sub Item 4</a>
            </span>
        </li>   
        <li><a href="#">FAQ'S</a>
            <span>
                <a href="#">Sub Item 1</a>
                <a href="#">Sub Item 2</a>
                <a href="#">Sub Item 3</a>
                <a href="#">Sub Item 4</a>
            </span>
        </li>   
        <li><a href="#">Contact Us</a></li>
    </ul>

这是CSS

ul#mainNav      { clear: both; width: 930px; height: 39px; margin: -5px 0 0 0; padding: 0; float: left; list-style-type: none; position: relative; background-color: #0d0600; font: bold 14px Arial, Helvetica, sans-serif; text-transform: uppercase; color: #fff; }
ul#mainNav li       { float: left; margin: 0; padding: 0; }
ul#mainNav li a         { padding: 12px 14px 12px 14px; display: block; text-decoration: none; color: #fff; }
ul#mainNav li a.selected,
ul#mainNav li a:hover             { background: #b5a37e url(../_images/bg_mainNav.jpg) repeat-x left top; }
ul#mainNav li span a:hover      { background-image: none; }
ul#mainNav span         { float: left; display: none; padding-top: 10px; position: absolute; z-index: 10; left: 0; top: 39px; width: 930px; background-color: #b5a37e; color: #fff; text-transform: none; }
ul#mainNav li:hover span        { display: block; }
ul#mainNav li span a                { display: inline; padding: 10px 14px 10px 14px; }
ul#mainNav li span a:hover, 
ul#mainNav li span a.selected   { text-decoration: underline; }

提前感谢您的帮助！

Answer 1

没有人出现，所以我坚持下去并找到了自己的解决方案：

我只需要增加填充：

ul#mainNav li a { padding: 12px 14px 18px 14px; }
ul#mainNav span { padding-top: 10px; top: 45px; }

为什么IE7中的子导航定位关闭？

1 个答案: