html – CSS左:-50%导致IE7忽略宽度

前端之家收集整理的这篇文章主要介绍了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.f2er.com/html/225621.html

猜你在找的HTML相关文章