当前位置: 网站建设 > 网页设计 > 建站经验 >

解决在IE6下使用display inline-block;的不兼容性问题

时间:2013-03-02 04:14来源:未知 作者:admin 点击:

标签:解决在IE6下使用display inline-block;的不兼容性问题 IE6(28)解决(48)Inline-Block(4)使用(77)display(7)
事实效果跟设想中的一致。 总结:float不仅仅是布局利器,也是转变行内元素为块元素的好方式。 可应用float:left; display:inline;取代display:inline-block;能很好的解决这种不兼容问题。修正款式后在IE6下的效果为: 悲剧呀,这完整不是我要的后果。 .panel .item { height:25px; *height:24px; line-height:25px, 解决图片IMG与容器下边界的空隙问题 ; text-decoration:none; margi
解决在IE6下使用display inline-block;的不兼容性问题》文章地址:http://www.tfxk.com/wangyesheji/jianzhanjingyan/030234R42013.htm

事实效果跟设想中的一致。

总结:float不仅仅是布局利器,也是转变行内元素为块元素的好方式。

可应用float:left; display:inline;取代display:inline-block;能很好的解决这种不兼容问题。修正款式后在IE6下的效果为:

悲剧呀,这完整不是我要的后果。

.panel .item {
height:25px;
*height:24px;
line-height:25px,解决图片IMG与容器下边界的空隙问题;
text-decoration:none;
margin: 4px 5px 0 0;
color:#416AA3;
font-size:12px;
white-space:nowrap;
display:inline-block;
zoom:1;
}

使用不同的阅读器测试:

最近弄页面,因为以前很少接触HTML,发现浏览器兼容性问题真是让人苦楚不堪啊,一遍遍的调CSS,一个浏览器一个样,IE6-IE9貌似就不一个是兼容的,当初寰球使用IE6的也就10.7%,IE6呀你快退出历史舞台吧。

--> [网站建设之]解决在IE6下使用display: inline-block;的不兼容性问题

检讨CSS的浏览器兼容性问题,解决因服务器而导致蜘蛛抓取失败的原因,发明,IE6下对display:inline-block,解决IE6浏览器不能正确解析CSS文件的问题;支持的不是很好。网上有材料说:修改inline元素的display属性为inline-block后,所有的浏览器都是支撑的。修改block元素的display属性为inline-block后,解决IE6不支持透明的PNG图片问题,IE6及以下的老版浏览器都是不支持的。

网页顶用到了如下CSS样式:

1. Chrome的渲染效果如下,最外面的div容器使用了panel样式,内部元素套用了item样式:

Tag:   IE6   display:   inline-block   不兼容       IE6   display:   inline-block   不兼容    ,解决Firefox下outerHTML不支持问题;

2. IE下的页面渲染效果,呈现错位情形:


(责任编辑:网站建设)
解决在IE6下使用display inline-block;的不兼容性问题相关文章
上一篇:解决图片IMG与容器下边界的空隙问题 下一篇:解决地方网站发展瓶颈 流量转化为现实收入
回到顶部