Css IE6中的布局百分比未相加_Css

Css IE6中的布局百分比未相加

css

Css IE6中的布局百分比未相加,css,Css,IE6当然会给我一些问题。我在使用百分比布局时遇到问题。我的代码如下所示： <div style="width: 92%; margin-left: 4%; margin-right: 4%; background-color: red; height: 20px;"> <div style="display: inline; float: left; margin-left: 1%; margin-right: 1%; width: 23%; back

IE6当然会给我一些问题。我在使用百分比布局时遇到问题。我的代码如下所示：

    <div style="width: 92%; margin-left: 4%; margin-right: 4%; background-color: red; height: 20px;">
        <div style="display: inline; float: left; margin-left: 1%; margin-right: 1%; width: 23%; background-color: blue; height: 20px;"></div>
        <div style="display: inline; float: left; margin-left: 1%; margin-right: 1%; width: 73%; background-color: yellow; height: 20px;"></div>
    </div>

因此，内部两个div都有1%的左右边距，因此总共有4%的边距。然后，宽度分别为23%和73%，内部分区的总宽度为96%。因此，将边距和宽度加在一起，我们得到了一个很好的100%

但IE6出于某种原因不同意，并打破了我的两个内部分区，将每个分区放在一个新行上。有人知道为什么吗？它适用于所有其他浏览器。我处理了我能想到的所有IE6 bug。display:inline应该解决双边距错误，而且它似乎不是一个问题

如果有人希望看到它的运行，请访问以下url：

谢谢你的帮助

IE6不擅长计算出与问题大小有关的百分比：

您会注意到，如果您在IE6中缓慢地调整窗口大小，页面会回流，那么您的2个div会不时神奇地位于您想要的同一行上

我总是发现解决这个问题的一个很好的可靠方法（除了不使用百分比）是确保总数始终为99%。显然，这有时会影响布局，但使用条件注释IE6 only规则可将影响降至最低。

IE6在标准模式下的百分比是垃圾

这篇文章可能是互联网上最难阅读的文章之一，但简单的答案是没有简单的答案

宽度99%可以解决这个问题，但任何从事设计师布局的人都无法容忍这种错误

我的解决方案是自己在IE样式表中使用表达式计算百分比

我的测试用例是：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-gb" lang="en-gb">
<head></head>
<body>
    <div style="width:50%;float:left">Left</div>
    <div style="width:50%;float:left">Right</div>
</body>
</html>


左边
赖特

当你调整浏览器窗口的大小时，它会在整个商店里跳跃

我可以对IE6进行如下修改：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-gb" lang="en-gb">
<head></head>
<body>
    <div style="width:expression(this.parentNode.offsetWidth/2);float:left">Left</div>
    <div style="width:expression(this.parentNode.offsetWidth/2);float:left">Right</div>
</body>
</html>


左边
赖特

您可能需要再次阅读960规格。你经常在同一个元素上同时使用alpha和omega。“我唯一的问题是IE6。”经典。