A
fully working example is availiable here on jsFiddle.我强烈建议您查看CSS,因为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>通常会填充剩下的大量点击目标.
>每个项目都是手动设计的宽度：190px,这使得它们的宽度保持一致(为了获得良好的视觉效果,这是由站点代码自定义的,因此它在样式与类中.
CSS：
> CSS使用一个简单的概念,< ul>向右移动50％,< li>向左移动50％(左：-50％;),使它们始终位于主容器的中心.
>标签重叠一点使用负边距& z-index所以角落十字交叉(在背景图像中完成,这里不重要)
问题
IE7决定它不会听取显式样式=“width：190px”,即使添加了！important.然而,这似乎只在左边时发生：< li>上存在-50％.项目.如果删除该样式,则选项卡会向右移动(错误的位置,但正确的固定宽度).
对我而言,这似乎是无关的,因为左边没有任何东西：-50％会导致物品碰撞,迫使它们达到最小宽度.
此设置正常工作,并在以下测试：
> IE8
> IE9
> FF3.6
> FF5
> Chrome稳定(第13版)*
> Chrome Beta(第14版)*
> Safari 3
*截至2011年7月18日
那么,是什么导致了这个？为什么会这样？我该如何解决？我尝试了各种各样的调整,但是不能让它服从宽度……
图像,以便您可以并排查看问题：
Problem http://img715.imageshack.us/img715/3686/ie7centertabsproblem.png
解决方法
我建议把style =“min-width：190px; max-width：190px;”而不是style =“width：190px;”.在IE7文档/浏览器模式下,它适用于我.
