代码之家 › 专栏 › 技术社区 › ICR

在IE中断开的浮动块链接

internet-explorer css html

ICR · 技术社区 · 14 年前

我有以下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中,节中的文本防止块链接中的空白成为链接。当右侧有文本时,链接中的空白将中断。当部分DIV结束时,链接工作正常,整个内容是一个链接,而不仅仅是文本。

我如何使整个元素始终成为链接,而不仅仅是当节DIV intervers时的文本?我试过用z命令,但没有用。

3 回复 | 直到 14 年前

Gert Grenander Keiron Lowe 14 年前

要么移除 width: 10em; 在你 #nav 样式,或将其更改为 width: 210px; .

derekerdmann 14 年前

在尝试了您的代码之后,我发现链接对我来说非常有用,正如上面发布的代码一样;我只在 #section DIV相对定位。在那种情况下, 第二节 放置在高于链接的位置并实际覆盖它们。这就是为什么看起来链接根本不起作用的原因。设置背景色 第二节 你会明白我的意思的。

实际上,可以使用z-index属性修复它。将其设置为大约10的值 #nav li 用任何比这个高的数字 第二节 和 只要这两个元素都相对定位 ,您应该看到 第二节 应该是这样的:

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

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

关于定位的更多信息,有一篇关于CSS技巧的非常好的文章,您可能想阅读: http://css-tricks.com/absolute-relative-fixed-positioining-how-do-they-differ/

ICR 14 年前

解决方案是在导航中添加背景色

推荐文章

Hala · 有没有什么方法可以将CSS属性设置为其他不兼容浏览器的属性的备用项?

2 年前

Error 1004 · 使用VBA从HTML中提取信息

6 年前

myroslav · IE11中Angular 4应用程序崩溃

6 年前

L Y E S - C H I O U K H Dumitru Boaghi · 在IE9/Angular 5/TypeScript上使用FormData,无需Ajax或jQuery

6 年前

Dhananjay C · Internet Explorer-表格上的CSS框阴影不适用于IE浏览器

6 年前

jacob · 当操作url为跨原点时,Microsoft浏览器不会将表单发布到iframe

6 年前

Athar K · 工具提示悬停上的过渡在IE上不起作用,在Google Chrome上效果很好

6 年前

adrien54 · 使用BlendColor过滤器的IE上的透明度问题

6 年前

Kathryn Crawford · ul元素上的伪元素在IE11中不起作用

6 年前

sankar · IE不显示abbr标记的边框底部

6 年前