web前端开发/UI设计/网站建设服务商
明锋工作室官网网站地图
IE6/7内联标签使用inline-block问题和块标签使用inline-block问题

 IE6/7是个可恶的东西,对内联标签比如A,SPAN等使用inline-block之后依然保持这不同于其他浏览器块元素特点。

比如:

<div ><a hre="#">454445656465</a><a>IE中对内联元素使用display:inline-block,IE是不识别的,但使用display:inline-block在IE下会触发layout,从而使内联元素拥有了display:inline-block属性的表征。从上面的这个分析,也不难理解为什么IE下,对块元素设置display:inline-block属性无法实现inline-block的效果。这时块元素仅仅是被display:inline-block触发了layout,而它本身就是行布局,所以触发后,块元素依然还是行布局,而不会如Opera中块元素呈递为内联对象。</a></div>

这两个A标签应用inline-block样式之后,在IE8和其他浏览器中呈现的效果跟inline样式一样,但是在DIV的宽度包不下这两个A标签的时候,IE6/7则会让A标签自动分行显示,很特别;但是最坑爹的是对内联标签使用inline-block样式之后就无法使用inline样式还原他们的原有属性。

 

另外:

 IE6/7中对DIV等块标签使用inline-block是无效的,使之有效的方法是:

div { display:inline-block; *zoom:1;*display:inline;} 

本文地址:http://www.mingfeng.me/news/tech/2014-05-02/260.html
TAG标签:IE6web前端开发
核心关键字:
©2016 MingfengStudio. All rights reserved. 红布林传媒 旗下 明锋工作室版权所有 粤ICP备14056057号-3  
网贷公司 Affirm 收购记账应用 Sweep,以此进入高频服务场景
网络借贷公司Affirm 宣布收购线上理财应用Sweep,Affirm 两周前刚刚完成 1 亿...
 欢迎咨询有关网站建设、网页设计、网站开发等问题...
姓名: *
电话: *
城市:
邮箱:
QQ:
微信:
内容:
验证码: 看不清楚,点击刷新点击刷新验证码
 
 升级提示
您的浏览器过于陈旧,已经被新时代淘汰;推荐您使用以下浏览器畅游互联网!
回到首页
QQ客服
客服电话
回到顶部!