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://aspnetjia.com/Cont-95.html

display:inline-block兼容ie6/7的写法的更多相关文章

  1. display:inline block inline-block 的区别

    原文地址:http://blog.csdn.net/jly036/article/details/5506182 display:block就是将元素显示为块级元素. block元素的特点是: 总是在 ...

  2. CSS三角的写法(兼容IE6)

    目录 简介 优点 原理 1. 先创建一个div 2. 然后给div设定边框. 3. 给div的四个边框都设置不同的颜色 4. 把宽度和高度都变成0 5. 其余角为透明 6. 兼容IE6浏览器 造成这样 ...

  3. display:inline 和display:inline-block和display:block的区别

    之前讲过块级元素使用display:block 行内元素使用display:inline 那么今天我们就来区分一下display:inline,display:inline-block和display ...

  4. display:inline,display:inline-block,display:block 区别

    之前一直迷惑于display:inline/inline-block/block的异同,在度娘谷哥的帮助下,突然有了一点思路. 按照网上的介绍,inline将对象转化为内联元素,block将对象转化为 ...

  5. display:inline、block、inline-block的区别

    display:block就是将元素显示为块级元素. block元素的特点是: 总是在新行上开始: 高度,行高以及顶和底边距都可控制: 宽度不设是它的容器的100%,除非设定一个宽度 <div& ...

  6. display:inline; display:block;

    block(块级元素): div .from. p .table. pre.h1~h6. dl .ol .ul等 inline(内联元素): span.a.strong.em.label.input. ...

  7. display:block、display:inline与displayinline:block的概念和区别

    总体概念 block和inline这两个概念是简略的说法,完整确切的说应该是 block-level elements (块级元素) 和 inline elements (内联元素).block元素通 ...

  8. 理解display:inline、block、inline-block

    要理解display:inline.block.inline-block的区别,需要先了解HTML中的块级(block)元素和行级(inline)元素的特点,行内元素也叫内联元素. 块级元素 总是另起 ...

  9. display:inline 跟 display:block 跟 display:inline-block区别

    我来说句人话吧.display:inline; 内联元素,简单来说就是在同一行显示.display:block; 块级元素,简单来说就是就是有换行,会换到第二行.display:inline-bloc ...

随机推荐

  1. centos 7 /etc/rc.local 开机不执行的问题

    最近发现centos7 的/etc/rc.local不会开机执行,于是认真看了下/etc/rc.local文件内容的就发现了问题的原因了 1 2 3 4 5 6 7 8 9 10 11 #!/bin/ ...

  2. eclipse 启动后,闪退

    网上的大部分是说删除 .metadata    说会workspace里面项目会消失 下面这个可以启动,项目还在 最好解决办法: 删除文件 [workspace]/.metadata/.plugins ...

  3. [转]ios平台内存常见问题

    本文转自CocoaChina,说的满详细的: 链接地址:http://www.cocoachina.com/bbs/read.php?tid=94017&keyword=%C4%DA%B4%E ...

  4. Android数据缓存

    1.http://blog.csdn.net/lnb333666/article/details/8460159 2.https://github.com/Trinea/android-common ...

  5. JQM[jquery mobile] 实战经验汇总

    动态装载的子页面(data-role=”page”),完全不用page div之外的tag,也不会起作用.子页面的javascript脚本必须写在page的</div>之前. 切换按钮(a ...

  6. WebDriver基本API使用(基于Java)V1.0

    WebDriver基本API使用(基于Java)V1.0http://www.docin.com/p-803032877.html

  7. ubuntu下搭建lamp

    一.使用apt-get方式为Ubuntu安装PHP+MYSQL+Apache   分别执行如下命令:   (1)安装MYSQL   sudo apt-get install mysql-server ...

  8. LocalBroadcastManager 使用小解

    最近在开发平板项目,完全是fragmentactivity+fragment的结构.看起来似乎简单,但是和以前不同的是,业务逻辑非常复杂,多处的非常规跳转,fragment之间的数据交换,一处更新多处 ...

  9. python 自动化测试资料

    python 自动化测试资料: http://yunpan.cn/QXVvwVJsAsPnb

  10. 扩展 IEnumerable<T>,让它根据另一个集合的顺序来排列

    假如我有两个集合: public class Teacher { public int Id { get; set; } public string Name { get; set; } } publ ...