前端开发初学之浏览器兼容性问题整理
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%;
}