display:inline-block兼容ie6/7的写法
来源:互联网 发布:传奇霸业魂珠活动数据 编辑:程序博客网 时间:2024/05/29 14:22
display:inline-block兼容ie6/7的写法
1、实例演示效果
2、display:inline-block作用?
使用display:inline-block属性,可以使行内元素或块元素能够变成行内块元素,简单直白点讲就是不加float属性就可以定义自身的宽、高,同时又能使该元素轻松在父元素居中显示!
3、什么时候会用到display:inline-block?
在网站布局中,很多时候,子元素中使用行内元素如span或块元素li标签且标签个数不定,而我们又想让这一块不管个数有多少个(子元素的总体宽度不定),始终都能居中显示!这个时候display:inline-block就能派上用场了!
4、ie6/7支持display:inline-block这个属性吗?
在内联元素上定义display:inline-block属性,发现IE6、IE7中的显示效果同其它浏览器一致,但事实是ie7及更低版本的ie浏览器不支持display:inline-block这个属性!
正确的解释是"使用inline-block属性在IE下会触发layout,因此元素上设置的width、height是能生效的,所以也就有了同其它浏览器一致的显示效果",而不能说IE6/7支持 display:inline-block!
5、行内元素只需定义display:inline-block,显示效果各浏览器都是一致,IE7下块元素如何实现 display:inline-block 的效果??
在IE下,display: inline-block只是触发了元素的layout。比如将display: inline-block设置到div上,只能保证这个div拥有块元素的特征(可以设置宽度,高度等),但还是会产生换行。接下来要设置display: inline,使其不产生换行。将display:inline-block;*display:inline;写在同一个样式上,inline-block属性是不会触发元素的layout的,因此我们还要额外加上 *zoom:1来触发layout!
6、IE7下块元素如何兼容 display:inline-block写法?
实际有效的方法共有2种:
方法1:直接让块元素设置为内联对象呈递(设置属性 display:inline),然后触发块元素的 layout(如:zoom:1 等)。兼容各浏览器的代码如下:div {display:inline-block;*display:inline; *zoom:1;...}
方法2:先使用 display:inline-block 属性触发块元素,然后再定义 display:inline,让块元素呈递为内联对象(两个display 要先后放在两个 CSS 样式声明中才有效果,这是 IE 的一个经典 bug ,如果先定义了 display:inline-block,然后再将 display 设回 inline 或 block,layout 不会消失)。代码如下(…为省略的其他属性内容): div {display:inline-block;...}div {*display:inline;}
7、display:inline-block元素间会产生多余空白怎么解决?
display:inline-block元素间会产生多余空白,这是inline-block本身特性!
严格来讲不算BUG,使用font-size设置可以解决,解决display:inline-block元素间多余空白的相关文章:http://www.phpvar.com/archives/453.html
- display:inline-block兼容ie6/7的写法
- display:inline-block兼容ie6/7的写法
- display:inline-block兼容ie6/7的写法
- 如何让IE6,7均兼容的display:inline-block
- "display: inline-block;"不兼容IE6
- 兼容IE6,7的inline-block
- ie6/7块级元素兼容inline-block写法
- 浅谈IE6/7对display:inline-block的支持
- css display:inline-block兼容ie6及火狐
- IE6兼容inline-block的方法
- IE6:display:inline-block解决方案
- css学习之路(5)--display:inline、block、inline-block的区别及inline-block兼容
- IE6、7的inline-block
- ie6 ie7 的div 对 display:inline-block的解析
- IE6和IE7不能识别display:inline-block的解决办法
- 让IE6/IE7 支持 display:inline-block 的方法
- 让IE6,7支持display:inline-block 和 max-height
- 解决IE6,7下display:inline-block;失效问题。
- java利用ant压缩指定文件夹
- Hibernate报错(user is not mapped)
- 面向对象2
- spring如何把service注入listener或者filter?
- C:内存使用
- display:inline-block兼容ie6/7的写法
- leetcode 191 Number of 1 Bits
- 第1章 使用petalinux参考BSP
- 第2章 测试Petalinux BSP镜像
- Maximum Subarray 和最大的子数组
- 计算复杂性-现代方法
- 《C专家编程》:如何检测链表里的环(附1)
- 安卓传递自定义类型
- 易生活(八)-APP--即时通信业务逻辑