Question

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％，内部div的总宽度为96％。因此，将边距和宽度加在一起，我们得出了100％的好处。

但IE6由于某种原因不同意，并打破了我的两个内部div并将每个div放在一个新的行上。有谁知道为什么？它适用于所有其他浏览器。我照顾了所有可以想到的IE6错误。显示：内联应该处理双边距错误，它似乎不是一个问题。

如果有人想看到它的实际效果，请输入以下网址：http://dev1.twinmed-dev.com/test.html

感谢您的帮助！

Answer 1

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

http://www.positioniseverything.net/explorer/percentages.html

您会注意到，如果您在IE6中慢慢调整窗口大小并且页面重新流动，那么您的2个div将会神奇地坐在同一条线上。

我总是找到一个很好的可靠解决方法来解决这个问题（除了不使用百分比）是确保总数始终为99％。显然，有时会损害布局，但使用条件注释的IE6规则可以最大限度地减少效果。

Answer 2

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

positioniseverything文章可能是互联网上最不可读的文章之一，但简单的答案是没有简单的答案。

宽度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>

当您调整浏览器窗口大小时，

会跳过整个商店。

我可以像IE这样修改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>

在IE6中没有累加的百分比布局

2 个答案: