视频1 视频21 视频41 视频61 视频文章1 视频文章21 视频文章41 视频文章61 推荐1 推荐3 推荐5 推荐7 推荐9 推荐11 推荐13 推荐15 推荐17 推荐19 推荐21 推荐23 推荐25 推荐27 推荐29 推荐31 推荐33 推荐35 推荐37 推荐39 推荐41 推荐43 推荐45 推荐47 推荐49 关键词1 关键词101 关键词201 关键词301 关键词401 关键词501 关键词601 关键词701 关键词801 关键词901 关键词1001 关键词1101 关键词1201 关键词1301 关键词1401 关键词1501 关键词1601 关键词1701 关键词1801 关键词1901 视频扩展1 视频扩展6 视频扩展11 视频扩展16 文章1 文章201 文章401 文章601 文章801 文章1001 资讯1 资讯501 资讯1001 资讯1501 标签1 标签501 标签1001 关键词1 关键词501 关键词1001 关键词1501 专题2001
cssdisplayinlineblock兼容性问题写法
2020-11-27 18:50:55 责编:小采
文档
 今天在写布局的时候发现的一个bug,如果不这样就达不到预期的效果,无法两行排列,原来ie6、ie7下对display:inline-block不支持,所以需要用到css hack才可以 兼容性:

IE6、IE7不识别inline-block但可以触发块元素。

其它主流浏览器均支持inline-block。

解决IE6、IE7兼容性的方法:

1、首先设置inline-block触发块元素,具有了layout的特性,然后设置display:inline使块元素呈现内联元素,此时layout的特性不会消失。

2、直接设置display:inline,使用zoom:1触发layout。

兼容所有浏览器的方法是:

CSS Code复制内容到剪贴板

  1. display:inline-block; /* 现代浏览器 +IE6、7 inline 元素 */

  2. *display:inline; /* IE6、7 block 元素 */

  3. *zoom:1;

下面简单介绍下:

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设置到p上,只能保证这个p拥有块元素的特征(可以设置宽度,高度等),但还是会产生换行。接下来要设置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 等)。兼容各浏览器的代码如下: p {display:inline-block;*display:inline; *zoom:1;...}
方法2:先使用 display:inline-block 属性触发块元素,然后再定义 display:inline,让块元素呈递为内联对象(两个display 要先后放在两个 CSS 样式声明中才有效果,这是 IE 的一个经典 bug ,如果先定义了 display:inline-block,然后再将 display 设回 inline 或 block,layout 不会消失)。代码如下(…为省略的其他属性内容): p {display:inline-block;...}p {*display:inline;}

7、display:inline-block元素间会产生多余空白怎么解决?

display:inline-block元素间会产生多余空白,这是inline-block本身特性!
严格来讲不算BUG,使用font-size设置可以解决,解决display:inline-block元素间多余空白的相关文章:http://www.gxlcms.com/css/76707.html

下载本文
显示全文
专题