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>都是一个标签，左边的圆形标签页面左侧有填充。
每个<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稳定版（第13版）*
Chrome Beta（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文档/浏览器模式下，它适用于我。

Answer 2

IE 7谁还在使用它？！？

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

CSS离开：-50％导致IE7忽略宽度

2 个答案: