问题描述
在IE6 / IE7中,display: inline-block
仅适用于 自然 内联的元素(例如span
)。
要使其在诸如的其他元素上起作用div
,您需要这样做:
#yourElement {
display: inline-block;
*display: inline;
zoom: 1;
}
*display: inline
使用“安全” CSS hack 仅适用于IE7及更低版本。
对于IE6 / 7,zoom:1
提供hasLayout。拥有“布局”是display:inline-block
始终工作的前提。
可以在保留有效CSS的情况下应用此变通办法,但实际上不值得考虑,特别是如果您已经在使用任何供应商前缀属性。
以获取有关的更多信息display: inline-block
(但是,请忘记了-moz-inline-stack
,这仅是现在较古老的Firefox 2所必需的)。
解决方法
我有一个带有此CSS代码inline-block
。谁能告诉我如何使其在Internet Explorer
6和7中工作。有什么想法吗?也许我做错了什么?谢谢!
#signup {
color:#FFF;
border-bottom:solid 1px #444;
text-transform:uppercase;
text-align:center;
}
#signup #left {
display: inline-block
}
#signup #right {
background-image:url(images/signup.jpg);
border-left: solid 1px #000;
border-right: solid 1px #000;
display: inline-block;
padding:1% 2%
width:16%;
}
#signup #right a { font-size:100%; font-weight:bold }
#signup #right p { font-size:90%; font-weight:bold }
#signup a:hover { color:#FFF; text-decoration:underline }