平武建站

如何解决cssdisplaynlineblock的兼容性问题

今天就跟大家聊聊有关如何解决cssdisplaynlineblock的兼容性问题，可能很多人都不太了解，为了让大家更加了解，小编给大家总结了以下内容，希望大家根据这篇文章可以有所收获。

10年积累的成都网站制作、网站建设经验，可以快速应对客户对网站的新想法和需求。提供各种问题对应的解决方案。让选择我们的客户得到更好、更有力的网络服务。我虽然不认识你，你也不认识我。但先做网站后付款的网站建设流程，更有北仑免费网站建设让你可以放心的选择与我们合作。

兼容性：
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、实例演示效果

如何解决cssdisplaynlineblock的兼容性问题
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本身特性！

看完上述内容，你们对如何解决cssdisplaynlineblock的兼容性问题有进一步的了解吗？如果还想了解更多知识或者相关内容，请关注创新互联行业资讯频道，感谢大家的支持。


分享名称：如何解决cssdisplaynlineblock的兼容性问题
标题来源：http://pwwzsj.com/article/ihiesh.html

其他资讯