1

可能重复:
IE6 + IE7 CSS 溢出问题:隐藏;- 位置:相对;组合

我试图让 HTML 无序列表(UL 标记)中的项目始终为 1 行的高度,无论每个项目中有多少行文本,使用固定高度和溢出:隐藏在每个 LI 内的 DIV 上.

这是一个演示:
http
://www.isw.com.au/domino/isw/iswdevelopmentwebsite.nsf/test-overflow-hidden 红色框包含有问题的列表。

这在 Opera、Firefox 和 Chrome 中完美运行,但在 IE 中不起作用。我希望它至少在 IE 7、8 和 9 中工作
。IE 使额外的文本行不可见,但仍为它们留出空间,有效地忽略了每个 LI 内 DIV 的固定高度。

链接到以下页面的另一个 StackOverflow 问题,指出溢出问题可以通过在容器上设置 position:relative 来解决:
http
://snook.ca/archives/html_and_css/position_relative_overflow_ie 我的演示页面的 CSS 在每个元素上都有 position:relative直到 BODY 内的顶级 DIV,但这没有效果。

如何解决 IE 中的问题?

更新:
我为 LI 标签添加了一个固定高度(1.8em),这很有帮助,但还有另一个问题。
对于每个 LI,IE 会在项目符号字符下方显示一行文本。这使得整个列表在应该为 4 行时占用 5 行空间。

4

1 回答 1

2

我已经解决了。我需要以下所有内容才能使其在跨浏览器中始终如一地工作:
- 每个 LI 内的 DIV 上的“display:inline”(阻止 IE 添加换行符);
- LI 标签上的固定高度和“溢出:隐藏”;最后
- UL 上的“list-style-position:inside”,因为“overflow:hidden”隐藏了子弹。

于 2012-08-03T04:03:04.130 回答