CSS离开:-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这使thier宽度均匀(一个不错的视觉效果,这是由该网站的代码,以便它在定制styleVs的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测试版(第14版)*
• 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 文档/浏览器模式下对我来说工作得很好。