Question

我有以下HTML：

<!DOCTYPE html>
<html>
    <head>
        <style>
            #nav {
                float: left;
                width: 10em;
            }

            #nav ul {
                list-style: none;
                margin: 0;
                padding: 0 20px;
            }

            #nav li {
                margin-top: 9pt;
                position: relative;
            }

            #nav a {
                border: solid 1px black;
                display: block;
                width: 10em;
                padding: 3px 0;
            }
        </style>
    </head>
    <body>
        <div id="container1">
        <div id="container2">
            <div id="nav">
                <ul>
                    <li><a href=".">Welcome</a></li>
                    <li><a href="news">News</a></li>
                    <li><a href="#">About</a>
                        <ul>
                            <li><a href="faq">FAQ</a></li>
                            <li><a href="charity">Charity</a></li>
                            <li><a href="committee">Committee</a></li>
                        </ul>
                    </li>
                </ul>
            </div>
           <div id="section">If this p is here, the block links no longer work.<br><br><br></div>
       </div>
       </div>
       </div>
    </body>
</html>

在IE8中，＃section中的文本阻止块链接中的空格成为链接。虽然右边有文本，但链接中的空格会中断。当#section div结束时，链接工作正常，整个事情是一个链接，而不仅仅是文本。

如何将整个元素作为链接始终，而不仅仅是#section div干扰时的文本？我试过z-order无济于事。

Answer 1

删除width: 10em;样式中的#nav，或将其更改为width: 210px;。

Answer 2

在尝试完代码后，我发现链接对我来说对我的代码很有用，因为它在上面发布了;我只在#section div相对定位时才运行你的问题。在这种情况下，#section放置得比链接高，实际上覆盖了它们。这就是为什么它看起来好像链接根本不起作用。在#section上添加背景颜色，你会看到我的意思。

您实际上可以使用z-index属性修复它。将#nav li设置为大约10的值并使用高于#section的任何数字，并且只要这两个元素都相对定位，您应该看到#section div顶部的链接。看起来应该是这样的：

#nav li { margin-top: 9pt; position: relative; z-index: 10; }

#section { position: relative; z-index: 20; }

有关定位的更多信息，您可能希望阅读的CSS-Tricks上有一篇非常好的文章：http://css-tricks.com/absolute-relative-fixed-positioining-how-do-they-differ/

Answer 3

解决方案是为#nav

添加背景颜色

在IE中破坏浮动块链接

3 个答案: