html - CSS 左 : -50% causing IE7 to ignore width

Question

A fully working example is availiable here on jsFiddle .我强烈鼓励您看这里，因为 CSS 有点大，我不想将它粘贴在这里(让我的问题难以阅读)。

我的网站上有一个水平居中的标签条，想法是 UL/LI 元素在页面上居中，我有一个解决方案，直到最近(看起来)它在所有浏览器配置上都有效。

这个 html 实际上很简单:

<div id="tabContainer">
    <ul>
        <li style="width: 190px;"><span><a href="#">Tab One with more text</a></span></li>
        <li style="width: 190px;"><span><a href="#">Tab Two</a></span></li>
        <li style="width: 190px;"><span><a href="#">Tab Three is wide</a></span></li>
    </ul>
</div>

• 每个<li>是一个制表符，它有左填充用于左圆 Angular 制表符的东西。
• 每个<span>为正确的圆形标签内容提供正确的填充。
• 最后 <a>通常会填满剩余部分，从而实现较大的点击目标。
• 每个元素都使用 width: 190px 手动设置样式这使它们的宽度保持一致(为了美观，这是由站点代码自定义的，因此它位于 style 与 class 中。

CSS:

• CSS 基于一个简单的概念，<ul>向右移动 50%，<li>向左移动 50% ( left: -50%; )，使它们始终位于主容器的中心。
• 标签使用负边距和 z-index 重叠一点，所以 Angular block 交叉(在背景图像中完成，这在这里并不重要)

问题

IE7 决定它不会听显式的 style="width: 190px" , 即使!important被添加到它。然而，这似乎只发生在 left: -50% 时。出现在 <li> 上元素。如果删除该样式，选项卡将向右移动(位置错误，但固定宽度正确)。

对我来说，这似乎是无关的，因为没有任何 left: -50%会导致元素碰撞并迫使它们达到它们的最小宽度。

此设置工作正常并在以下环境中进行了测试:

• IE8
• IE9
• FF3.6
• FF5
• Chrome 稳定版 (v13)*
• Chrome 测试版 (v14)*
• Safari 3

*截至 2011 年 7 月 18 日

---

那么，是什么原因造成的呢？为什么会这样？我该如何解决？我尝试了各种调整，但无法使其符合宽度...

---

图像，以便您可以并排查看问题:

Problem http://img715.imageshack.us/img715/3686/ie7centertabsproblem.png

Answer 1

我建议使用 style="min-width:190px; max-width:190px;" 而不是 style="width:190px;"。它在 IE7 文档/浏览器模式下对我来说工作正常。