前端开发的浏览器兼容性问题整理

前端开发初学之浏览器兼容性问题整理

HTML：

1.img 的 alt 属性在图片不存在的情况下，在各个浏览器的解析不一致

   在chrome、IE浏览器上显示为一张破损的图片，在 firfox上显示为alt的文字信息

2. ul 的内外边距问题

在IE6/IE7 中，ul标签有默认的外边距，在IE8以上及其他浏览器，ul 有默认的内边距
解决办法：

* {
	margin: 0;
	padding: 0;
}

IE6:

1. height 低的像素值无效问题

原因：IE6 容器默认行高的问题
解决办法：为高度过低元素，设置隐藏属性即可

overfloat: hidden;

2. 浮动时 margin 值变为双倍问题

	eg: 
		margin: 0 auto;
		float: left;

margin 的左右边距值实际表现为 20px，解决办法： 为浮动元素添加行内属性即可

		margin: 0 auto;
		float: left;
		display: inline;

3.max-width、min-width、max-height、min-height等属性不支持问题

解决办法：使用expression来实时获取元素当前适合宽高

max-width: 1280px;
_width: expression(documentElement.clientWidth > 1280 ? '1280px': 'auto');
min-width: 980px;
_width: expression(documentElement.clientWidth < 980? '980px': 'auto');
min-height:800px;_height:expression((documentElement.clientHeight || document.body.clientHeight) > 800 ? "800px" : "");
min-height:600px;_height:expression((documentElement.clientHeight || document.body.clientHeight) < 600 ? "600px" : "");

4. fixed属性值不支持问题

position: fixed;
top: 100px;
left: 100px;

解决办法：改悬浮效果为定位：

position:fixed;
_position:absolute;
top:100px;
_top:expression(documentElement.scrollTop + 100 + "px");
left:10px;

5. 定位元素 同时 使用 上下或左右时，只识别上与左问题

eg:

position: absolute;
top: 0;
left: 0;
right: 0:
bottom: 0;

解决办法： 为元素赋值宽高属性即可

width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;

多浏览器问题：

1. 浮动问题

子元素浮动导致父元素塌陷，清除浮动即可：

.clearfloat:after {
	content: '';
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
}
.clearfloat {
	zoom: 1;
}

2. 页面滚动时，悬浮元素发生抖动问题

可能原因： 浏览器性能消耗过大或网页上有动画等
解决办法： 给被旋转元素添加一个隐藏背面的属性

position: fixed;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
backface-visibility: hidden;

3. 图片的元素不能自适应垂直居中问题

eg:

<p>
	<i>
		<img src="" width="120" height="120" />
	</i>
</p>

解决办法：

p{
	width:800px;
	height:800px;
	display:table-cell;
	text-align:center;
	vertical-align:middle;
}
p img{
	position:static;
	+position:relative;
	top:-50%;left:-50%;
	vertical-align:middle;
}
p i{
	position:static;
	+position:absolute;
	top:50%;
}

今天笔记就到这哩！^_