CSS left: -50%导致IE7忽略宽度

Question

在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>是一个标签，它有左填充左圆角标签的东西。
• 每个<span>都有正确的填充右圆角标签的东西。
• 最后，<a>通常填充剩余部分，使其成为一个大点击目标。
• 每个项目都是手动样式的width: 190px，保持他们的宽度统一(为了一个很好的视觉效果，这是由网站代码定制的，所以它在style vs class。

CSS:

• CSS的工作原理很简单，<ul>向右移动50%，<li>向左移动50% (left: -50%;)，使它们始终位于主容器的中心。
• 标签使用负边距&z-index，让边角部分纵横交错(在背景图像中完成，这在这里并不重要)

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

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

这个设置可以正常工作，并在

中进行了测试:

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

*截至2011年7月18日

---

那么，是什么导致了这种情况呢?为什么会发生这种情况?我该怎么修理它?我试过各种各样的调整，不能让它服从宽度…

---

图片，以便您可以并排看到问题:

问题http://img715.imageshack.us/img715/3686/ie7centertabsproblem.png

Answer 1

我建议用style="min-width:190px; max-width:190px;"代替style="width:190px;"。它在IE7文档/浏览器模式下工作得很好。

Answer 2

IE 7到底谁在用它?

你可以尝试使用em代替像素，这里有一个很好的em转换器:http://pxtoem.com/