html – CSS左：-50％导致IE7忽略宽度

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文档/浏览器模式下,它适用于我.

原文地址：https://www.jb51.cc/html/225621.html