文档章节

IE6/IE7下:inline-block解决方案

L
 LorinLuo
发布于 2016/03/31 09:54
字数 479
阅读 74
收藏 0

IE6/IE7下:inline-block解决方案

IE6/IE7下对display:inline-block的支持性不好。

1、inline元素的display属性设置为inline-block时,所有的浏览器都支持;

2、block元素的display属性设置为inline-block时,IE6/IE7浏览器是不支持的;

      对象呈递为内联对象,但是对象的内容作为块对象呈递。旁边的内联对象会被呈递在同一行,允许空格。(准确地说,应用此特性的元素现为内联对象,周围元素保持在同一行,但可以设置宽度和高度等块元素的属性)

     IE中对内联元素使用display:inline-block,IE是不识别的,但使用display:inline-block在IE下会触发layout,从而使内联元素拥有了display:inline-block属性的表征。从上面的这个分析,也不难理解为什么IE下,对块元素设置display:inline-block属性无法实现inline-block的效果。这时块元素仅仅是被display:inline-block触发了layout,而它本身就是行布局,所以触发后,块元素依然还是行布局,而不会如Opera中块元素呈递为内联对象。

 

IE6下块元素如何实现display:inline-block的效果?


有两种方法:
1、 先使用display:inline-block属性触发块元素,然后再定义display:inline,让块元素呈递为内联对象(两个display 要先后放在两个CSS声明中才有效果,这是IE的一个经典bug,如果先定义了display:inline-block,然后再将display设回 inline或block,layout不会消失)。代码如下(...为省略的其他属性内容): 

div {display:inline-block;...} 
div {display:inline;}

2、直接让块元素设置为内联对象呈递(设置属性display:inline),然后触发块元素的layout(如:zoom:1 或float属性等)。代码如下:

div { display:inline-block; _zoom:1;_display:inline;} /*推荐*/
div { display:inline-block; _zoom:1;*display:inline;} /*推荐:IE67*/


本文转载自:http://www.cnblogs.com/leejersey/archive/2012/07/11/2586506.html

共有 人打赏支持
L
粉丝 18
博文 166
码字总数 116776
作品 0
成都
程序员
私信 提问
兼容IE6、IE7的min-width、max-width

警句:珍爱生命,远离IE 很多时候,我们会想要设置容器的最小宽度或最大宽度,但IE6不支持min-width、max-width属性怎么办? 别着急,跟着我慢慢来,会让你捉急的还很多呢 首先我们来看看标准...

Seast
2014/07/09
0
3
前端——display:inline-block兼容ie6/7的写法

1、display:inline-block作用? 使用display:inline-block属性,可以使行内元素或块元素能够变成行内块元素,简单直白点讲就是不加float属性就可以定义自身的宽、高,同时又能使该元素轻松在父...

coolrp
2016/12/02
8
0
IE CSS Bug及解决方案参考手册

作为一名前端,我们通常要做的就是让页面在各系统A-Grade浏览器,甚至网站浏览份额0.1%以上的浏览器上良好显示。当然,还有性能问题。不过,今天要说的是样式的兼容问题。在IE/Mozilla/Webk...

solu
2011/01/06
0
0
快切——响应CSS框架发布 v1.2 版本

快切(kuai.qietu.com)讯:快切css源自最早的quickcss框架,它的目的是减少你的css开发时间。它提供一个可靠的css基础去创建你的项目,能够用于网站的快速设计,通过重设和重建浏览器标准,可...

tyshymy
2014/09/29
4.4K
12
CSS 清除浮动

方法一: .cl:after { visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; } .cl { zoom: 1; / for IE6 IE7 / } 方法二: 1. .clearfloat {clear:bo......

IT追寻者
2016/05/31
10
0

没有更多内容

加载失败,请刷新页面

加载更多

【大数据分析常用算法】9、马尔科夫模型

简介 这一章节我们讲解马尔科夫模型。给定一组随机变量(如顾客最近的交易日期),马尔科夫模型只根据前一个状态(前一个最近交易日期)的分部指示该变量最近的分布。 1、马尔科夫链基本原理...

Areya
19分钟前
0
0
vue自定义属性

vue自定义属性如果是固定的非写死的,可以直接写,例如 <button vkshop-event-name="buyNow" vkshop-event-type="click"></button> 如果是动态属性,需要加冒号 : <button :vkshop-event-na......

litCabbage
22分钟前
0
0
Java 线程池的使用好处

使用线程池的好处: 1.减少在创建和销毁线程上所花的时间以及系统资源的开销 2.如不使用线程池,有可能造成系统创建大量线程而导致消耗完系统内存 以下是Java自带的几种线程池: 1、newFixedT...

飓风2000
25分钟前
0
0
Ubuntu 16.04安装Java 8

1 Java 8 下载地址 http://www.oracle.com/technetwork/cn/java/javase/downloads/jdk8-downloads-2133151-zhs.html 2 以root用户登录将下载的jdk-8u92-linux-x64.tar.gz文件放到/temp目录下......

群星纪元
35分钟前
1
0
我们总结了每个技术团队都会遇到的 4 个难题

阿里巴巴 2019 年实习生校园招聘已经启动,为此,我们整理了一篇《每个技术团队都会遇到的4个难题》,帮助即将从校园进入公司实习的后端程序员,以实践的视角,看看一个后端技术团队会遇到的...

阿里云云栖社区
39分钟前
2
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部