lan*_*ong 127 html css internet-explorer-7
有人可以帮我理解这个bug吗？Firefox的工作正常,但Internet Explorer 7却没有.似乎不明白了display: inline-block;.
HTML:
<div class="frame-header">
<h2>...</h2>
</div>
CSS:
.frame-header {
height:25px;
display:inline-block;
}
kap*_*apa 301
IE7 display: inline-block;黑客攻击如下:
display: inline-block;
*display: inline;
zoom: 1;
默认情况下,IE7仅支持inline-block自然inline元素(Quirksmode兼容性表),因此您只需要这个hack用于其他元素.
zoom: 1有没有触发hasLayout行为,我们用星级酒店的黑客用于设置display到inline只在IE7和较低(较新浏览器将不适用这一点).hasLayout并且inline在一起基本上会触发inline-blockIE7中的行为,所以我们很高兴.
这个CSS不会验证,并且无论如何都会使你的样式表搞砸了,所以通过条件注释使用仅限IE7的样式表可能是一个好主意.
<!–-[if IE 7]>
<link rel="stylesheet" href="ie7.css" type="text/css" />
<![endif]–->
由于没有人再使用IE6和7,我将提出一个不同的解决方案:
你不再需要黑客,因为IE8 本身支持它
对于那些在IE8之前必须支持那些石器时代浏览器的人(这不是IE8那么老,太咳):
对于IE版本控制的帐户,在他的文章中使用<html>像Paul Irish这样的标签中的一些条件类
<!--[if IE 7]><html class="no-js lt-ie9 lt-ie8"><![endif]-->
<!--[if IE 8]><html class="no-js lt-ie9"><![endif]-->
<!--[if gt IE 8]><!--><html class="no-js"><!--<![endif]-->
通过这个,你将在不同的IE浏览器的html标签中有不同的类
您需要的CSS如下
.inline-block {
display: inline-block;
}
.lt-ie8 .inline-block {
display: inline;
zoom: 1;
}
这将验证,您不需要额外的CSS文件
.frame-header
{
background:url(images/tab-green.png) repeat-x left top;
height:25px;
display:-moz-inline-box; /* FF2 */
display:inline-block; /* will also trigger hasLayout for IE6+7*/
}
/* Hack for IE6 */
* html .frame-header {
display: inline; /* Elements with hasLayout and display:inline behave like inline-block */
}
/* Hack for IE7 */
* + html .frame-header {
display: inline; /* Elements with hasLayout and display:inline behave like inline-block */
}