IE6/IE7的兼容问题
2016-06-27 16:24
344 查看
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*/
解决方法:
#nav li { display:inline-block;*zoom:1; *display:inline;}
解决inline-block空白间距问题:
ul{
font-size:0;
letter-spacing: -8px;/*根据不同字体字号或许需要做一定的调整*/
word-spacing: -8px;
}
li{
display:inline-block;
*display:inline;
*zoom:1;
letter-spacing:normal;
word-spacing:normal;
}
IE6|IE7中li底部3px间距BUG
以下是引发此BUG的条件:
必要条件:
li的子元素设置了浮动(例如:本例中的a设置了左浮动)
充要条件:
(IE6/7)li设置了width、height、zoom 之一 (例如:本文中的li设置了width)
(仅IE7)li设置了padding-top、padding-bottom、margin-top、margin-bottom 之一
解决方案:
方案一
#list li设置clear:left|both,这时#list li不能设置width、height、zoom。
方案二
.hotel_rank .rank_ul li设置float:left,这时.hotel_rank .rank_ul li可以设置width、height、zoom。
方案三
给li中的a设置vertical-align:top|middle|bottom
这个例子中。方案二和方案三都可以解决这个问题。
position:relative层级问题 ie7
当我们使用css做一个浮动层的时候通常会用到如下带:
.xxx
{
postion:absolute;
z-index:12px;
}
这样做class=”xxx”的元素就会位于普通层的上方,这样在大多数浏览器中都是没有问题的,但是在IE6或者IE7这种怪咖中就有可能不起作用了,原因就在于需要将容器的父辈容器也设置z-index属性,在IE6/7中需要对比两个不同级别的元素的z-index要逐级的向父元素查找,如果父元素没有可比性,那么后面的元素会无视前面的元素的z-index强行覆盖。因此在IE6或者IE7中需要特别注意。
<div style="position:relative;width: 1000px;z-index:10;top:0;left:0"><!--DIV1-->
<div style="position:absolute;width: 1000px ; height: 200px ;">abcd</div>
< /div>
b181
< div style="position:relative;width: 1000px;z-index:1;top:0;left:0"><!--DIV2-->
<div style="position:absolute;width: 1000px ; height: 200px ;">1234</div>
< /div>
!只要父级元素设置了position:relative;的,就都要加z-index:30;
例如上级有很多父级元素都设置了relative,那么都要加z-index; 不然这个BGG依然存在。
IE7不支持box-sizing:border-box;
设置div宽高的时候,IE7中div的实际宽度为 width+padding
textarea标签在ie7下面文字内容会默认不换行,以至于宽度超出范围出现滚动条。
解决方法:
overflow:auto;
word-break:break-all;
设置网页默认文档模式
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" >
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
IE背景图片无法显示,但是其他浏览器能显示。
可能是文件名过长导致的。
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*/
解决方法:
#nav li { display:inline-block;*zoom:1; *display:inline;}
解决inline-block空白间距问题:
ul{
font-size:0;
letter-spacing: -8px;/*根据不同字体字号或许需要做一定的调整*/
word-spacing: -8px;
}
li{
display:inline-block;
*display:inline;
*zoom:1;
letter-spacing:normal;
word-spacing:normal;
}
IE6|IE7中li底部3px间距BUG
以下是引发此BUG的条件:
必要条件:
li的子元素设置了浮动(例如:本例中的a设置了左浮动)
充要条件:
(IE6/7)li设置了width、height、zoom 之一 (例如:本文中的li设置了width)
(仅IE7)li设置了padding-top、padding-bottom、margin-top、margin-bottom 之一
解决方案:
方案一
#list li设置clear:left|both,这时#list li不能设置width、height、zoom。
方案二
.hotel_rank .rank_ul li设置float:left,这时.hotel_rank .rank_ul li可以设置width、height、zoom。
方案三
给li中的a设置vertical-align:top|middle|bottom
这个例子中。方案二和方案三都可以解决这个问题。
position:relative层级问题 ie7
当我们使用css做一个浮动层的时候通常会用到如下带:
.xxx
{
postion:absolute;
z-index:12px;
}
这样做class=”xxx”的元素就会位于普通层的上方,这样在大多数浏览器中都是没有问题的,但是在IE6或者IE7这种怪咖中就有可能不起作用了,原因就在于需要将容器的父辈容器也设置z-index属性,在IE6/7中需要对比两个不同级别的元素的z-index要逐级的向父元素查找,如果父元素没有可比性,那么后面的元素会无视前面的元素的z-index强行覆盖。因此在IE6或者IE7中需要特别注意。
<div style="position:relative;width: 1000px;z-index:10;top:0;left:0"><!--DIV1-->
<div style="position:absolute;width: 1000px ; height: 200px ;">abcd</div>
< /div>
b181
< div style="position:relative;width: 1000px;z-index:1;top:0;left:0"><!--DIV2-->
<div style="position:absolute;width: 1000px ; height: 200px ;">1234</div>
< /div>
!只要父级元素设置了position:relative;的,就都要加z-index:30;
例如上级有很多父级元素都设置了relative,那么都要加z-index; 不然这个BGG依然存在。
IE7不支持box-sizing:border-box;
设置div宽高的时候,IE7中div的实际宽度为 width+padding
textarea标签在ie7下面文字内容会默认不换行,以至于宽度超出范围出现滚动条。
解决方法:
overflow:auto;
word-break:break-all;
设置网页默认文档模式
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" >
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
IE背景图片无法显示,但是其他浏览器能显示。
可能是文件名过长导致的。
相关文章推荐
- WIN7系统JavaEE(java)环境配置教程(一)
- hive12启动报错org.apache.thrift.server.TThreadPoolServer.<init>(Lorg/apache/thrift/server/TThreadPoolServer$Args;)
- size_t 数据类型深思
- Two Sum Leetcode Python Java
- web前端开发:Http协议
- 移动端高清、多屏适配方案
- Codeforces Round #359 (Div. 2) D. Kay and Snowflake
- 2096小明A+B
- 存储过程定时任务
- 10年乔布斯对flash的思考迎来了web3.0时代(html5的应用)
- [UWP 开发] 一个简单的Toast实现
- CMake学习笔记(4)——使用外部共享库和头文件
- 274. H-Index
- 安卓线程池ThreadPoolExecutor的常见使用
- 如何提高大型工程的编译速度?
- permission 和 user-permission的区别
- win8系统蓝屏提示DRIVER POWER STATE FAILURE的原因及两种解决方法
- 欢迎使用CSDN-markdown编辑器
- 使用Popen运行程序超时就kill
- 固定电话的正则表达式