html - IE7 - 显示 : block <a> within <li> does not display correctly

标签 html css internet-explorer-7

如果您查看此代码:http://jsfiddle.net/b3KaM/2/

在 IE7 中 <a>标签不会延伸到它们的父级 <li>宽度即使display: block;已设置。您可以看到列表项的背景颜色设置为红色和链接的背景颜色设置为黄色的区别。

它显然在 FF/Chrome 和 friend 中运行良好。

编辑: 这里的复杂之处在于我无法设置固定宽度 - 链接文本应保持在一行上,整个列表应根据需要展开。

我知道之前有人问过这个问题,我在 SO 上发现了一些问题,但我找不到解决这个问题的有效方法 - 任何人有什么想法吗?

如果不是 - 可以肯定地说在 IE7 上不可能获得与在其他浏览器上相同的结果,即它是一个没有解决方法的 Internet Explorer 错误?

最佳答案

此问题是由IE7及更低版本的渲染现象引起的known as hasLayout .

要解决这个问题,您必须简单地阻止您的 a 元素“获得布局”。

不幸的是,有 massive list of stuff that causes an element to "gain layout" .

您的 a 元素当前设置了 overflow: hiddenmin-height。如果您删除这些属性,它将在 IE7 中工作。

关于html - IE7 - 显示 : block <a> within <li> does not display correctly,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11224947/

相关文章:

javascript - 为什么 .setAttribute() 和 .removeAttribute 方法在我的 javascript 代码中不起作用?

php - 管理页面不会显示

javascript - 下拉列表在 IE 7 上打开/隐藏在另一个下拉列表后面

html - :after and :before CSS pseudo elements hack for Internet Explorer 7

html - 使用 Bootstrap 网格从缩略图中删除边距

c# - Dapper 和 SQL Server 数据库入门

ios - Icecast 直播音频到 iPhone

html - 下拉菜单 CSS

css - 使一个 div 可见,另一个不可见

html - IE7 和 Firefox/Opera/Chrome 之间的间距差异