13 html css cross-browser
我正在尝试放置一些(垂直堆叠)显示:显示内的块元素:内联块元素.根据CSS规范,内联块元素应该是一个包含块,因此它可以在其中包含display:block元素,这些元素不应影响布局的其余部分.
但是,display:block元素在显示内部:inline-block元素会破坏页面的其余部分; 所以在内联块中什么也没有,甚至像段落这样的基本元素; 只有简单的文本才能避免破坏页面的其余部分(通过中断我的意思是将其他div向下移动,例如,在这种情况下,左侧红色块向下移动一行并且在其上方有一个空白空格).我正在使用Firefox 3.0.6.
<html><head><style type="text/css">
#left {
display: inline-block;
background: red;
width: 20%;
height: 100%;
}
#right {
display: inline-block;
background: green;
width: 80%;
height: 100%;
}
</style></head><body>
<div id="left">Left</div><div id="right">Right</div>
</body></html>
以上显示为两个窗格,左红色,右绿色,如预期.如果我改变"正确"
<p>Right</p>
或者完全删除它,或者(我想做)用几个div替换它,我得到了错误的格式.
这是Firefox的错误,还是我做错了什么,或者我的期望是不正确的？(FWIW,IE 7将它们全部平分,好像它不理解内联块;无所谓,这是一个内部应用程序.我只使用Firefox).我可以使用浮动/边距获得我想要的布局,但我不想这样做.
好的显示:内联块可能有点棘手,以获得跨浏览器.它至少需要几个黑客,对于Firefox 2,可能需要额外的元素.
CSS
.inlineBlock { display: -moz-inline-stack; display: inline-block; zoom: 1; *display: inline; }
display:-moz-inline-stack适用于Firefox 2.所有直接子节点都需要显示:block或者是块级元素.注意如果你需要你的inline-block元素来收缩包装我认为你可以使用display:-moz-inline-box代替.
zoom:1给出了元素的hasLayout(对于IE 7及以下版本).IE7及以下兼容性所需的黑客攻击的第1部分.
**display:inline*是IE7及以下兼容性所需的hack的第二部分.
我偶尔需要添加overflow:隐藏IE兼容性.
针对您的具体情况,我认为您需要的是:
<html><head><style type="text/css">
#left {
display: inline-block;
background: red;
width: 20%;
height: 100%;
vertical-align: top;
}
#right {
display: inline-block;
background: green;
width: 80%;
height: 100%;
vertical-align: top;
}
</style></head><body>
<div id="left">Left</div><div id="right"><p>Right</p><p>Right 2</p></div>
</body></html>