【发布时间】：2011-07-20 17:08:43
【问题描述】：
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>都是一个制表符，左圆角制表符的内容有左填充。 - 每个
<span>都为右圆角标签内容提供了正确的填充。 - 最后，
<a>通常会填满剩余部分，从而形成较大的点击目标。 - 每个项目都使用
width: 190px手动设置样式，以保持它们的宽度一致（为了获得漂亮的视觉外观，这是由站点代码自定义的，因此它位于style与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 测试版 (v14)*
- Safari 3
*截至 2011 年 7 月 18 日
那么，这可能是什么原因造成的？为什么会这样？我该如何解决？我已经尝试了各种调整，但无法让它服从宽度......
图片以便您可以并排查看问题：
Problem http://img715.imageshack.us/img715/3686/ie7centertabsproblem.png
【问题讨论】：
-
您正在运行真正的 IE7 安装吗？即使在 IE6 中，它至少对我来说在 IETester 上工作得很好。不过它看起来确实有点过度设计，如果你愿意放弃当前的代码，我相信三十点会钉它:)
-
您是否特别喜欢这种将
lis 居中的方法？我的意思是，我可以用不同的技术来集中它们吗？ -
@Wesley：中心选项卡不比左/右选项卡窄吗？我在 IE9(Win7) 中使用 IE7 文档/浏览器模式，并且在 WinXP 上的 IETester IE7 中也确认了该问题。让我发布问题的图片。
-
@thirtydot：我愿意接受建议，关键是标签重叠并且 z-index 已调整为看起来正确。
-
感谢您发布代码。我遇到了
left: -0%;为我解决的类似问题。直到看到您的代码，我才想到要给left添加负值。
标签： html css layout internet-explorer-7