Block alignment woes with IE7, how to solve?
Unfortunately I have to support IE7 (and preferably IE6) In IE8, Safari, Firefox, Chrome, I get a perfectly good layout ujsing an outer div to enlose two boxes.
------------------------------------
| |
| -------------- ----------- |
| | | | | |
| | A | | B | 开发者_如何学Python|
| | | | | |
| -------------- ----------- |
| |
------------------------------------
I'm using inline-block to style A and B. A is floated left, B right. Both boxes have internal divs and other elements.
However, when I use IE6 and IE7 I get this monstrosity.
------------------------------------
| |
| -------------- |
| | | |
| | A | |
| | | |
| -------------- |
| ----------- |
| | | |
| | B | |
| | | |
| ----------- |
| |
------------------------------------
Any definitive answers to what is going on and how to solve it?
Firstly, put a DOCTYPE at the top of your document. This forces IE into standards compliant rather than quirks mode (both euphemisms). For example:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
Secondly, if you want IE6 compatibility use floats (Andrew is quite correct in stating that display: inline-block only works in IE7 on elements with natural display: inline and <div> has natural display: block). This should work:
<div id="outer">
<div id="left"></div>
<div id="right"><>/div>
</div>
with:
#outer { overflow: hidden; }
#left { float: left; }
#right { float: right; }
as long as the widths of left and right are less than the width of outer including padding, borders and margins. If not, right will drop down to the next line.
In IE 6 and 7 inline-block works only on elements that have a natural display: inline. Are your boxes <div>s? If yes, it should work.. Do you have a test case? (See quirksmode.org for more info!)
IE block level element inline-block hack: this may be useful for you
加载中,请稍侯......
精彩评论