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

A fully working example is availiable here on jsFiddle。我强烈鼓励你看看这里的CSS是一种很大，我不想在这里粘贴（使我的问题难以阅读）。CSS左：-50％导致IE7忽略宽度

我在我的网站上有一个水平居中的标签页，这个想法是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宽度均匀（一个不错的视觉效果风格，这是由该网站的代码，以便它在一个style Vs的class定制

的CSS：

的CSS工作过一个简单的概念，在<ul>转移50％的权利，而<li>转移50％左右（left: -50%;）把他们总是在主容器的中心。
凸片使用负余量& z索引所以角件纵横交错（在背景图像中，其在这里并不重要完成）

的问题

IE7重叠的位决定它不会听取明确的style="width: 190px"，即使0123'被添加到它。但是，这似乎只在<li>项目上存在left: -50%时才会发生。如果删除了该样式，则选项卡将向右移动（错误的位置，但修正了固定的宽度）。

对我来说，这看起来好像没什么关系因为没有什么东西left: -50%会导致物品发生碰撞并迫使它们进入最小宽度。

此设置正常工作，并进行了测试：

IE8
IE9
FF3。6
FF5
铬稳定（V13）*
Chrome测试版（V14）*
的Safari 3

*截至7月18日，2011

所以，这可能是什么原因造成的？为什么会发生？我该如何解决它？我已经试过各种调整，而不能让它服从宽度...

形象，你可以看到并排侧的问题：

Problem http://img715.imageshack.us/img715/3686/ie7centertabsproblem.png

来源

2011-07-18 Aren

你运行一个真正的IE7安装？对于IETester，即使在IE6中，它至少也能正常工作。它确实看起来有些过度设计，如果你想要删除当前的代码，我确信thirtydot会指定它:) –

你是否特别关注以'li's为中心的方法？我所说的是，我可以用不同的技术来集中它们吗？ – thirtydot

@韦斯利：中心标签不比左/右窄吗？我在IE9（Win7）中使用了IE7文档/浏览器模式，并且还在WinXP上的IETester IE7中确认了isssue。让我张贴问题的照片。 – Aren

我建议将style="min-width:190px; max-width:190px;"而不是style="width:190px;"。它适用于IE7文档/浏览器模式。

来源

2011-07-20 03:55:05 dpp

优秀！它创造了奇迹，谢谢你！ – Aren

-2

IE 7谁使用它？！？

你culd尝试使用EM不是像素的有一个很好的电磁转换器在这里： http://pxtoem.com/

来源

2011-07-20 09:08:43 user750158

-1不幸的是，我们仍然有10％的IE7流量，我们不能忽略它们。 – Aren

好的，竖起大拇指。但为什么使用宽度呢？为你创建一个小提琴，希望它有帮助：http：//jsfiddle.net/msgSw/1/ – user750158

没关系我最后的帖子检查了这一点：http://jsfiddle.net/msgSw/3/ – user750158

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

回答

相关问题