• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com专业计算机教程网站
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure
您的位置:首页 > 网页设计 >CSS > css display inline block 兼容性问题写法

css display inline block 兼容性问题写法

作者:佚名 字体:[增加 减小] 来源:互联网 时间:2017-08-06

本文主要包含display,inline,block等相关知识,佚名 希望在学习及工作中可以帮助到您
兼容性:

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

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

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

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

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

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

  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设置到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.jb51.net/css/76707.html

您可能想查找下面的文章:

  • display和visibility的区别
  • 浅谈CSS中display/float/position属性值的相互影响
  • css(display,float,position)深入理解
  • 浅谈CSS的Display属性可能的值
  • CSS display属性的table表格布局
  • css display inline block 兼容性问题写法
  • 深入浅析css3 中display box使用方法
  • CSS3 display知识详解
  • 详解css中的display属性
  • 实现div垂直居中的display:table-cell方法示例介绍

相关文章

  • 2017-08-06CSS 层叠加的5条原则
  • 2017-08-06如何用css代码实现有立体效果的表格
  • 2017-08-06CSS3实现翘边的阴影效果的代码示例
  • 2017-08-06HTML/CSS对浏览器的判断
  • 2017-08-06CSS控制文本的长度 超过一行显示省略号的实现方法
  • 2017-08-06CSS3实现3D翻书效果
  • 2017-08-06IE6/7/8/9中table元素align=center权重比margin:0大的实例说明
  • 2017-08-06css实现div自动添加滚动条(图片或文字等超出时显示)
  • 2017-08-06css3实现3D色子翻转特效
  • 2017-08-06CSS 优先级问题详解

文章分类

  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure

最近更新的内容

    • 换个角度看页面重构中的语义化
    • css 入门基础教程
    • IE中关于使用innerHTML加入HTML代码的问题
    • CSS中几个与换行有关的属性简明总结
    • div+css实现两列table效果示例
    • position:sticky用法介绍及浏览器兼容性
    • UL里的LI元素左浮动层一行显示时使其居中的方法
    • CSS3中利用animation属性创建雪花飘落特效
    • 防止CSS网页布局错位 CSS宽度计算
    • 使用css实现圆角图形绘制

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有