IE6/IE7下对display:inline-block的支持性不好。
1、inline元素的display属性设置为inline-block时,所有的浏览器都支持;
2、block元素的display属性设置为inline-block时,IE6/IE7浏览器是不支持的;
对象呈递为内联对象,但是对象的内容作为块对象呈递。旁边的内联对象会被呈递在同一行,允许空格。(准确地说,应用此特性的元素现为内联对象,周围元素保持在同一行,但可以设置宽度和高度等块元素的属性)
IE中对内联元素使用display:inline-block,IE是不识别的,但使用display:inline-block在IE下会触发layout,从而使内联元素拥有了display:inline-block属性的表征。从上面的这个分析,也不难理解为什么IE下,对块元素设置display:inline-block属性无法实现inline-block的效果。这时块元素仅仅是被display:inline-block触发了layout,而它本身就是行布局,所以触发后,块元素依然还是行布局,而不会如Opera中块元素呈递为内联对象。
IE6下块元素如何实现display:inline-block的效果?
有两种方法:
1、 先使用display:inline-block属性触发块元素,然后再定义display:inline,让块元素呈递为内联对象(两个display 要先后放在两个CSS声明中才有效果,这是IE的一个经典bug,如果先定义了display:inline-block,然后再将display设回 inline或block,layout不会消失)。代码如下(...为省略的其他属性内容):
div {display:inline-block;...}
div {display:inline;}
2、直接让块元素设置为内联对象呈递(设置属性display:inline),然后触发块元素的layout(如:zoom:1 或float属性等)。代码如下:
div { display:inline-block; _zoom:1;_display:inline;} /*推荐*/
div { display:inline-block; _zoom:1;*display:inline;} /*推荐:IE67*/
相关推荐
有两种方式解决这个问题,让IE6/IE7 支持 display:inline-block 的方法。 复制代码代码如下:<ul> <li></li> <li></li> <li></li> </ul> 1.先使用display:inline-block,再使用display:inline,如下: 复制代码代码...
NULL 博文链接:https://qiyan86-163-com.iteye.com/blog/551754
在使用CSS实现表现的时候,会经常接触到display:inline-block这一属性,它可以将对象呈递为内联对象,但是对象的内容作为块对象呈递,旁边的内联对象会被呈递在同一行内,允许空格。本文向大家描述一下CSS属性...
doctype-public="-//W3C//DTD XHTML 1.0 Transitional//EN" doctype-system="http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"/> <xsl:output name="text" method="text"/> <xsl:output name=...
<li class="top"><a href="#" class="top_link"><span>我的音乐盒</span></a></li> <li class="top"><a href="#" class="top_link"><span>我的介绍</span></a></li> <li class="top"><a href="#" class="top_link...
<!DOCTYPE ... <li><a href="#">7</a></li> <li><a href="#">8</a></li> <li><a href="#">尾页</a></li> </ul> </body> </html>
ie6,ie7的haslayout属性是个让人头疼的问题,想到一个属性display:inline-block;对!inline- block就是干这个事的,让一个元素既不换行又具有block元素的特性
1> 0 functions had inline decision re-evaluated but remain unchanged 1>已完成代码的生成 1>autolabelimg.vcxproj -> D:\wincpp\gitwork\autolabelimg\x64\Release\autolabelimg.exe 1>已完成生成项目...
display: inline-block; } .icon-error { background: url(./images/icon-error.png) no-repeat center; width: 16px; height: 16px; display: inline-block; } .icon-indicator.field-validation-valid {...
但是,由于display:inline-block最大的不同就是其没有父元素的匿名包裹特性,这使得display:inline-block属性的使用非常自由,可与文字,图片混排,可内嵌block属性元素,可以可以置身于inline水平的元素中。...
<li><a onclick="alert(1)"><img src="img/xiaodingdanghexianzijiuyuan.jpg" border="0" /><span>小叮当和仙子救援大行动</span></a></li> <li><a onclick="alert(1)"><img src="img/bihu.jpg" border="0" />...
search=y" target="_blank"><font color="#0000ff">4.9</font></a></td></tr></tbody></table></td></tr></tbody></table></td></tr> <tr> <td height="3" background=...
由于inline-block会触发IE的layout,所以IE6中只要设置{display:inline-block;}即可。 让IE6区块元素具备inline-block属性,有两种方法 A、可以先触发layout,再设置为inline,需要注意的是这两个display必须在两...
其实我们以为应该是这样的:但是ie6,ie7是这样显示的:IE6/IE7下对display:inline-block的支持性不好。解决方案:直接让块元素设置为内
--[if lte IE 6]></td></tr></table></a><![endif]--> </li> </ul> <br class="clear" /> <ul> <li><a href="#nogo" class="four outer">SEARCH<!--[if IE 7]><!--></a><!--<![endif]--> <!--[if lte IE 6]><table>...
建立一个宽度很长的一个页面,里面包含许多列,外面的div块的宽度不能确定,若是外面的div块的宽度不够 就会导致部分子div块移动到下面的一行,下面与大家分享下display:inline-block的使用示例
有关于使用inline-block来代替float的讨论也蛮多的,最常说的就是使用inline-block来代替float进行布局,或者使用inline-block来实现元素的居中效果。前面《CSS3制作的分页导航》一文中就是使用的inline-block制作的...