Percentage layout not adding up in IE6_问答_开发者

开发者 https://www.devze.com 2022-12-14 03:53 出处：网络

IE6 is giving me issues of course. I\'m having problems with my layout using percents. The code I have looks like the following:

相关专题：css

IE6 is giving me issues of course. I'm having problems with my layout using percents. The code I have looks like the following:

    <div style="width: 92%; margin-left: 4%; margin-right: 4%; background-color: red; height: 20px;">
        <div style="display: inline; float: left; margi开发者_如何学Cn-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>

So the inner two divs both have right and left margins of 1%, so a total of 4% of margins. Then the widths are 23% and 73% for a total of 96% width for the inner divs. So adding the margins and widths together, we come out to a nice 100%.

But IE6 for some reason doesn't agree, and breaks my two inner divs and places each on a new line. Does anyone know why? It works for every other browser. I took care all of the IE6 bugs I could think. The display: inline should take care of the double margin bug, and it doesn't appear to be an issue.

Here's the url if anyone wants to see it in action: http://dev1.twinmed-dev.com/test.html

Thanks for any help!

IE6 is no good at working out percentages is about the size of the problem:

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

You'll notice that if you slowly resize the window in IE6 and the page reflows, every now and again your 2 divs will magically sit on the same line as you wanted.

I've always found a good reliable workaround to this issue (aside from not using percentages) is to make sure that the total is always 99%. Obviously that can compromise the layout sometimes, but using a conditional-commented IE6 only rule minimises the effect.

IE6 is rubbish at percentages when in Standards mode.

The positioniseverything article is probably one of the most unreadable on the Internet, but the simple answer is that there is no simple answer.

Width 99% would solve the problem, but anyone working on a designer layout won't be able to tolerate that kind of error.

My solution is to calculate the percentages yourself, using expressions, in your IE stylesheet.

My test case is this:

<!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>

which jumps all over the shop when you resize the browser window.

And I can amend it for IE6 like so:

<!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>