IE6兼容问题

沙发客
345 阅读3分钟

标签的兼容

  • IE6不支持H5标签： head头部引入js库DD_belatedPNG_0.0.8a.js或者createElement生成的标签具有内联标签属性,成为块元素display: block;
<script>
	document.createElement('section');
	document.createElement('header');
	document.createElement('footer');
	document.createElement('nav');
</script>

  • li内的子级浮动，li在IE6.7下会产生4px间隙：

    针对ie6、7使用hack给li添加vertical-align
给li加float

  • p,h,dt标签不能嵌套块元素

  • input在IE6下的问题

    1. 会有上下1px的空隙
    2. 背景图滚动
    3. input文字不居中
    4. 出现蓝色边框（包含chrome标准浏览器）
a. 给input元素浮动
b. fixed:`background:red url(") no-repeat fixed;`
c. 设置字体和行高
d. `outline: none;`

布局常见问题

浮动

  • 清浮动
.clearfix{
    _zoom:1;
}
.clearfix:after{
	content: "";
	display: block;
	clear: both;
}
  • 元素浮动尽量设置宽度，如果浮动元素宽度是有子级元素决定，就给子级里的块元素加浮动. 因为里面的块元素会撑满一行使布局错位
 <div class="box" style="width: 300px;border: 1px solid red;">
	<div class="left" style="float: left;">
		<div style="height: 30px;">左边</div>
	</div>
	<div class="right" style="float: right;">
		<div style="height: 30px;">右边</div>
	</div>
</div>
  • 第一块元素浮动 同级第二块元素加margin值会使这两块元素之间有间隙问题

同级都要浮动

  • IE6下子元素超出父级宽高，会把父级的宽高撑开

子元素高度不要超过父级高度

  • 两个浮动元素中间有注释或者内嵌元素,并且和父级宽度相差不超过3像素，文字就被复制.

margin

  • margin-top传递

触发触发haslayoutoverflow: hidden; BFCzoom:1;

  • margin叠压

尽量设置同一方向的margin

  • 浮动元素有margin时会触发双倍边距，margin为left时，为左边第一个元素margin为right时，为右边第一个元素

针对ie6、7使用hack添加display:inline

####定位position

  • ie6下决定定位元素和浮动元素是同级的话，绝对定位元素会消失

只要不是同级就可以避免这个问题

  • IE6下绝对定位元素父级宽高是奇数,绝对定位元素的right和bottom值会有1px的偏差

定位元素的定位父级宽高设成偶数

  • 使用绝对定位，父级一定要有确定的宽和高或者内联块元素块元素都可以，内联元素浏览器自己解析会有差异

display

  • IE6不支持display: inline-block;

解决办法：display:inline;zoom:1;

  • hidden是包不住子级的relative

父级也加相对定位

内联块元素与文本节点同级

内联块元素与文本节点同级，line-height会不起作用.解决方法同级都要内联块

<div  class="box2">
	<i>你好</i>
	<span class="display: inline-block;"></span>
</div>

图片

    GIF【文件较小】<br />

	能做动画，支持256色。支持全透明，不支持半透明.
	网页中的小ico，以及对颜色质量要求不高的图片
    JPEG - jpg 【较大】<br />
	高保真图片，以及对颜色要求严格的图片格式。不支持任何透明.
	PNG8 【文件较小】<br />
	对颜色支持度高，支持全透明，不支持半透明.
	PNG24 【文件较小】<br />
	对颜色支持度高，支持全/半透明。

png24兼容问题

1 方法 <script src="js/DD_belatedPNG_0.0.8a.js"></script>

调用DD_belatedPNG.js不能用在body上

2 body上可以用filter

_background-image: none;
_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="img/png24.png", sizingMethod="crop");

css常见问题

  • border在IE6下1px的dotted有问题

可以用图片代替

  • !important

是在同一个选择器中多个相同样式进行比较

其它

  • IE6不支持透明度opacity需要用到filter: alpha(opacity=20);0是全透明

  • IE6 下最小高度19px

overflow: hidden;

  • if
<!--[if lte IE 8]> 
   <link rel="stylesheet" href="css/index.css" />
<![endif]-->
  • 固定定位 性能会比原生js差
_position: absolute;
_right:0;
_top:expression(eval(document.documentElement.scrollTop + 100));
avatar
文章
阅读
粉丝