gpt4 book ai didi

html - IE7的 block 对齐问题,如何解决?

转载 作者:搜寻专家 更新时间:2023-10-31 23:14:43 25 4
gpt4 key购买 nike

不幸的是我必须支持 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/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com