blocks|key|266015|text|IE7不能正确支持'inline-block‘，更多信息请点击此处：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|266016|使用可以使用：'inline‘代替。|266017|你到底想要达到什么目的？给我们举个例子，放在这里：|266018|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|H|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|I|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|J|8|@]|9|@]|A|$]]|$1|F|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|G|$]]

IE7 does not support 'inline-block' properly, more info here: <a href="http://flipc.blogspot.com/2009/02/damn-ie7-and-inline-block.html" rel="nofollow">LINK</a>
 Use can use: 'inline' instead.

What exactly are you trying to achieve? Make us an example and put here: <a href="http://jsfiddle.net/" rel="nofollow">http://jsfiddle.net/</a>

blocks|key|2954844|text|IE7+display:+inline-block;黑客攻击如下：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|2954845|display:+inline-block;
*display:+inline;
zoom:+1;|code-block|syntax|javascript|2954846|默认情况下，IE7只支持在自然语言元素(+naturally+inline+elements，Quirksmode+Compatibility+Table)上使用inline-block，因此您只需要对其他元素使用此技巧。|2954847|zoom:+1是用来触发hasLayout行为的，我们使用star+property+hack在IE7和更低版本中将display设置为inline+(较新的浏览器不会应用这一点)。hasLayout和inline在一起基本上会触发IE7中的inline-block行为，所以我们很高兴。|2954848|这种CSS不会进行验证，而且可能会使您的样式表变得一团糟，因此通过conditional+comments使用仅支持ie7的样式表可能是个好主意。|2954849|<!–-[if+IE+7]>
<link+rel="stylesheet"+href="ie7.css"+type="text/css"+/>
<![endif]–->|2954850|entityMap|0|LINK|mutability|MUTABLE|url|http://www.quirksmode.org/css/display.html|1|http://www.satzansatz.de/cssd/onhavinglayout.html|2|http://en.wikipedia.org/wiki/CSS_filter#Star_hack|3|http://www.quirksmode.org/css/condcom.html^0|4|M|0|0|V|6|29|C|1B|U|0|0|0|7|C|9|1M|7|1W|6|2J|9|2T|6|3D|C|C|9|1|T|I|2|0|X|K|3|0|0^^$0|@$1|2|3|4|5|6|7|16|8|@$9|17|A|18|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|19|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|1A|8|@$9|1B|A|1C|B|C]|$9|1D|A|1E|B|C]]|D|@$9|1F|A|1G|1|1H]]|E|$]]|$1|M|3|N|5|6|7|1I|8|@$9|1J|A|1K|B|C]|$9|1L|A|1M|B|C]|$9|1N|A|1O|B|C]|$9|1P|A|1Q|B|C]|$9|1R|A|1S|B|C]|$9|1T|A|1U|B|C]|$9|1V|A|1W|B|C]]|D|@$9|1X|A|1Y|1|1Z]|$9|20|A|21|1|22]]|E|$]]|$1|O|3|P|5|6|7|23|8|@]|D|@$9|24|A|25|1|26]]|E|$]]|$1|Q|3|R|5|H|7|27|8|@]|D|@]|E|$I|J]]|$1|S|3|-4|5|6|7|28|8|@]|D|@]|E|$]]]|T|$U|$5|V|W|X|E|$Y|Z]]|10|$5|V|W|X|E|$Y|11]]|12|$5|V|W|X|E|$Y|13]]|14|$5|V|W|X|E|$Y|15]]]]

The IE7 <code>display: inline-block;</code> hack is as follows:

<pre class="lang-css prettyprint-override"><code>display: inline-block;
*display: inline;
zoom: 1;
</code></pre>

By default, IE7 only supports <code>inline-block</code> on naturally <code>inline</code> elements (<a href="http://www.quirksmode.org/css/display.html">Quirksmode Compatibility Table</a>), so you only need this hack for other elements. 

<code>zoom: 1</code> is there to trigger <a href="http://www.satzansatz.de/cssd/onhavinglayout.html"><code>hasLayout</code></a> behaviour, and we use the <a href="http://en.wikipedia.org/wiki/CSS_filter#Star_hack">star property hack</a> for setting the <code>display</code> to <code>inline</code> only in IE7 and lower (newer browsers won't apply that). <code>hasLayout</code> and <code>inline</code> together will basically trigger <code>inline-block</code> behaviour in IE7, so we are happy.

This CSS will not validate, and can make your stylesheet messed up anyways, so using an IE7-only stylesheet through <a href="http://www.quirksmode.org/css/condcom.html">conditional comments</a> could be a good idea.

<pre><code>&lt;!–-[if IE 7]&gt;
&lt;link rel="stylesheet" href="ie7.css" type="text/css" /&gt;
&lt;![endif]–-&gt;
</code></pre>

blocks|key|262818|text|更新|type|unstyled|depth|inlineStyleRanges|entityRanges|data|262819|由于没有人再使用IE6和7，我将提出一个不同的解决方案：|262820|你不再需要黑客，因为IE8+|offset|length|style|BOLD|262821|对于那些必须在IE8之前支持那些石器时代的浏览器的人(并不是说IE8太老了，太干咳)：|262822|对于IE版本控制的账号，在<html>标签中使用一些条件类，如his+article中的Paul+Irish状态|CODE|262823|

<html+class="no-js">|code-block|syntax|javascript|262824|这样，对于不同的IE浏览器，在html-tag中就会有不同的类|262825|您需要的CSS如下所示|262826|.inline-block+{
++++display:+inline-block;
}
.lt-ie8+.inline-block+{
++++display:+inline;
++++zoom:+1;
}|262827|这将生效，您不需要额外的CSS文件|262828|262829|老答案|262830|.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%2B7*/
}
/*+Hack+for+IE6+*/
*+html+.frame-header+{
++++display:+inline;+/*+Elements+with+hasLayout+and+display:inline+behave+like+inline-block+*/
}
/*+Hack+for+IE7+*/
*+%2B+html+.frame-header+{
++++display:+inline;+/*+Elements+with+hasLayout+and+display:inline+behave+like+inline-block+*/
}|262831|entityMap|0|LINK|mutability|MUTABLE|url|http://www.paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/|1|http://www.paulirish.com/^0|0|0|0|D|0|0|D|6|V|B|0|18|A|1|0|0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|1G|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|1H|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|1I|8|@$F|1J|G|1K|H|I]]|9|@]|A|$]]|$1|J|3|K|5|6|7|1L|8|@]|9|@]|A|$]]|$1|L|3|M|5|6|7|1M|8|@$F|1N|G|1O|H|N]]|9|@$F|1P|G|1Q|1|1R]|$F|1S|G|1T|1|1U]]|A|$]]|$1|O|3|P|5|Q|7|1V|8|@]|9|@]|A|$R|S]]|$1|T|3|U|5|6|7|1W|8|@]|9|@]|A|$]]|$1|V|3|W|5|6|7|1X|8|@]|9|@]|A|$]]|$1|X|3|Y|5|Q|7|1Y|8|@]|9|@]|A|$R|S]]|$1|Z|3|10|5|6|7|1Z|8|@]|9|@]|A|$]]|$1|11|3|-4|5|6|7|20|8|@]|9|@]|A|$]]|$1|12|3|13|5|6|7|21|8|@]|9|@]|A|$]]|$1|14|3|15|5|Q|7|22|8|@]|9|@]|A|$R|S]]|$1|16|3|-4|5|6|7|23|8|@]|9|@]|A|$]]]|17|$18|$5|19|1A|1B|A|$1C|1D]]|1E|$5|19|1A|1B|A|$1C|1F]]]]

<h2>Update</h2>

As nobody uses IE6 and 7 anymore I will present a different solution: 
You don't need a hack anymore, because IE8 <a href="http://caniuse.com/#feat=inline-block" rel="nofollow">supports it by itself</a>

For those who must support those stone age browsers before IE8 (It's not that the IE8 is that old, too cough): 
For the account of IE version control, use some Conditional Class in <code>&lt;html&gt;</code>tag like <a href="http://www.paulirish.com/" rel="nofollow">Paul Irish</a> states in <a href="http://www.paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/" rel="nofollow">his article</a>

<pre><code>&lt;!--[if IE 7]&gt;&lt;html class="no-js lt-ie9 lt-ie8"&gt;&lt;![endif]--&gt;
&lt;!--[if IE 8]&gt;&lt;html class="no-js lt-ie9"&gt;&lt;![endif]--&gt;
&lt;!--[if gt IE 8]&gt;&lt;!--&gt;&lt;html class="no-js"&gt;&lt;!--&lt;![endif]--&gt;
</code></pre>

By this you will have different classes in html-tag for different IE Browsers

The CSS you need is as follows

<pre><code>.inline-block {
 display: inline-block;
}
.lt-ie8 .inline-block {
 display: inline;
 zoom: 1;
}
</code></pre>

This will validate and you don't need an extra CSS file

<hr>

<h2>Old answer</h2>

<pre><code>.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 */
}
</code></pre>

blocks|key|2954912|text|使用内联，它与列表项的这种选择器一起工作：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2954913|ul+li+{}|code-block|syntax|javascript|2954914|或者更具体地说：|2954915|ul[className+or+name+of+ID]+li[className+or+name+of+ID]+{}|2954916|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|O|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

use inline, it works with this kind of selectors for list items:

<pre><code>ul li {}
</code></pre>

or to be specific:

<pre><code>ul[className or name of ID] li[className or name of ID] {}
</code></pre>

Can someone please help me get my head around this bug? With Firefox its working fine but with Internet Explorer 7 its not. It seems not to understand the <code>display: inline-block;</code>.

html:

<pre><code>&lt;div class="frame-header"&gt;
 &lt;h2&gt;...&lt;/h2&gt;
&lt;/div&gt;
</code></pre>

css:

<pre><code>.frame-header {
 height:25px;
 display:inline-block; 
}
</code></pre>

IE7 does not understand display: inline-block

有没有人能帮我解决这个问题？在Firefox上它可以正常工作，但在Internet Explorer7上就不行了。它似乎不理解display: inline-block;。html:<div class="frame-header"> <h2>...</h2></div>css:.frame-header { ...

问IE7不理解display: inline block
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问IE7不理解display: inline blockEN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问IE7不理解display: inline block
EN