inline-block兼容低版本IE浏览器~~在IE6/Ie7和IE8中
来源:互联网 发布:mac samba客户端 编辑:程序博客网 时间:2024/05/14 06:44
在IE6、IE7中不识别display:inline-block属性,但使用inline-block属性在IE下会触发layout,从而使内联元素拥有了display:inline-block属性的表症。从上面的分析也不难理解为什么IE6、IE7下对块元素设置display:inline-block属性无法实现inline-block的效果。这时块元素仅仅是被inline-block触发了layout,而它本就是行布局,所以触发后,块元素依然是行布局。IE8识别display:inline-block;在IE6、IE7中实现块元素的inline-block效果有以下两种方法:1先使用display:inline-block属性触发layout,然后再定义display:inline让块元素呈现内联对象(两个display要先后放在两个CSS声明中才有效果,这是IE的一个经典BUG)。2直接将块元素设置为display:inline呈现为内联对象,然后触发layout(如zoom:1)。
注意:inline-block和inline设置的类名必须是不一样的。而且必须先设置inline-block再设置inline
<div class="mail inline"></div>
.mail{
display:inline-block;
}
.inline{display:inline;}
或者
mail{
zoom:1;/* 触发元素的haslayout属性 */ display:inline-block;/* 非IE6、7浏览器识别该属性,使得页面也成行块布局 */ *display:inline;/* 针对IE6、7定义 display:inline,让块元素呈递为内联对象,并具有display:inline-block属性的表症 */
}
阅读全文
0 0
- inline-block兼容低版本IE浏览器~~在IE6/Ie7和IE8中
- display:inline-block在IE6/Ie7和IE8中的区别
- margin如何在FF/IE6/IE7/IE8/Google兼容浏览器
- 图片上传预览,兼容IE6、IE7、IE8和firefox浏览器
- CSS兼容IE6、IE7、IE8和Firefox浏览器的方法
- 浏览器兼容:IE6,IE7,IE8,FIREFOX,Chrome
- 浏览器兼容:IE6,IE7,IE8,FIREFOX,Chrome
- 兼容IE6 IE7 IE8
- IE Developer Toolbar - 浏览器模式: IE7, IE8, IE8兼容模式
- 各种IE兼容模式代码,IE6,IE7,IE8,IE9,IE10
- IE(IE6/IE7/IE8)不兼容HTML5标签的方法
- 关于css部份技巧, div在IE6/IE7/IE8/FF 不同浏览器 中的效果兼容
- css技巧div在IE6/IE7/IE8/FF 不同浏览器 中的效果兼容
- 解决低版本IE浏览器渲染模式和html5兼容
- ie6 ie7 ie8 共存以及Firefox浏览器CSS兼容写法
- CSS Hack浏览器兼容IE6+IE7+IE8+IE9+FF
- IE6,IE7,IE8浏览器之间相互兼容的问题
- CSS Hack浏览器兼容IE6+IE7+IE8+IE9+FF
- PHP数字价格格式化,保留两位小数
- hdu Reward 拓扑排序 + 分层
- 电子概念——液晶显示器重要参数检测
- IO流模板
- 设置ListView的高度(重算组件子项)
- inline-block兼容低版本IE浏览器~~在IE6/Ie7和IE8中
- android studio cmake添加jsoncpp
- 这样输出“Hello World”
- Qt删除TreeWidget节点
- Android Studio打开DDMS : An error has occurred URIUtil
- 中文查询乱码解决过程记录
- Array对象的方法实现(3)----Array.prototype.filter和Array.prototype.find(实现常规参数的功能)
- PAT (Basic Level) Practise (中文) 1007. 素数对猜想 (20)
- 通过maven-shade-plugin 解决Elasticsearch与spark的jar包冲突问题