有没有人能帮我解决这个问题?在Firefox上它可以正常工作,但在Internet Explorer7上就不行了。它似乎不理解display: inline-block;
。
html:
<div class="frame-header">
<h2>...</h2>
</div>
css:
.frame-header {
height:25px;
display:inline-block;
}
发布于 2011-07-01 15:42:45
IE7 display: inline-block;
黑客攻击如下:
display: inline-block;
*display: inline;
zoom: 1;
默认情况下,IE7只支持在自然语言元素( naturally inline
elements,Quirksmode Compatibility Table)上使用inline-block
,因此您只需要对其他元素使用此技巧。
zoom: 1
是用来触发hasLayout
行为的,我们使用star property hack在IE7和更低版本中将display
设置为inline
(较新的浏览器不会应用这一点)。hasLayout
和inline
在一起基本上会触发IE7中的inline-block
行为,所以我们很高兴。
这种CSS不会进行验证,而且可能会使您的样式表变得一团糟,因此通过conditional comments使用仅支持ie7的样式表可能是个好主意。
<!–-[if IE 7]>
<link rel="stylesheet" href="ie7.css" type="text/css" />
<![endif]–->
发布于 2011-09-28 23:49:40
更新
由于没有人再使用IE6和7,我将提出一个不同的解决方案:
你不再需要黑客,因为IE8
对于那些必须在IE8之前支持那些石器时代的浏览器的人(并不是说IE8太老了,太干咳):
对于IE版本控制的账号,在<html>
标签中使用一些条件类,如his article中的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-tag中就会有不同的类
您需要的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 */
}
发布于 2011-07-01 15:29:18
IE7不能正确支持'inline-block‘,更多信息请点击此处:
使用可以使用:'inline‘代替。
你到底想要达到什么目的?给我们举个例子,放在这里:
https://stackoverflow.com/questions/6544852
复制相似问题