不幸的是我必须支持 IE7(最好是 IE6) 在 IE8、Safari、Firefox、Chrome 中，我得到了一个非常好的布局，它使用一个外部 div 来包含两个盒子。
------------------------------------
| |
| -------------- ----------- |
| | | | | |
| | A | | B | |
| | | | | |
| -------------- ----------- |
| |
------------------------------------
我正在使用内联 block 来设置 A 和 B 的样式。A 向左浮动，B 向右浮动。两个盒子都有内部 div 和其他元素。
但是，当我使用 IE6 和 IE7 时，我得到了这个怪物。
------------------------------------
| |
| -------------- |
| | | |
| | A | |
| | | |
| -------------- |
| ----------- |
| | | |
| | B | |
| | | |
| ----------- |
| |
------------------------------------
对于正在发生的事情以及如何解决它有明确的答案吗？
最佳答案
首先，将 DOCTYPE 放在文档的顶部。这迫使 IE 进入标准兼容模式而不是怪癖模式(两种委婉说法)。例如:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
其次，如果您想要 IE6 兼容性，请使用 float (Andrew 非常正确地指出 display: inline-block 仅适用于 IE7 中具有自然 display: inline 的元素，而 <div> 具有自然 display: block )。这应该有效:
<div id="outer">
<div id="left"></div>
<div id="right"><>/div>
</div>
与:
#outer { overflow: hidden; }
#left { float: left; }
#right { float: right; }
只要 left 和 right 的宽度小于 outer 的宽度，包括 padding，border 和 margins。如果没有，右边会下拉到下一行。
关于html - IE7的 block 对齐问题，如何解决？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/1937803/