IE6,IE7,IE8 css bug搜集及浏览器兼容性问题解决方法汇总

2020-05-11 08:05:19易采站长站整理

1:采用JS


var ua = navigator.userAgent.toLowerCase();
var isIE6 = ua.indexOf(“msie 6”) > -1;//判断是否为IE6
// remove css image flicker
//IE6下默认不缓存背景图片,CSS里每次更改图片的位置时都会重新发起请求,用这个方法告诉IE6缓存背景图片
if(isIE6){
try{
document.execCommand(“BackgroundImageCache”, false, true);
}catch(e){}
}

2.在页面上直接使用1个DIV元素来加载该图片,这样加载图片就能真正被缓存,鼠标移动也不会发送请求了。
28:ie6下css实现max/min-width/height


_width:expression(this.width>300?”300px”:ture); max-width:300px;
_height:expression(this.height>300?”300px”:ture); max-height:300px;

29:css空白外边距互相叠加的解决方法


body{width:300px; font-family:’微软雅黑’; font-size:1em; text-indent:10px; line-height:1.25;}
div{background:#000;margin:10px;}
div p{background:#f60;margin:15px}

这是一个div元素内嵌套p的简单样例,先别复制保存为html测试,在你看完上面的代码后,你是否以为它出为你呈现如下图的效果?
好,现在你可以复制上面代码,保存到本地,然后在浏览器中打开.你会惊讶的发现,它呈现给你的效果是这样的:
为什么会这样呢?按CSS中,对于有块级子元素的元素计算高度的方式,如果元素没有垂直边框和填充,那其高度就是其子元素顶部和底部边框边缘之间的距离.故,子元素的顶部和底部空白边就突出到元素的外围了.p元素的15px外边距与div元素的10px的外边距形成一个单一的15px垂直空白边,另外,形式的这个空白边并非为div所包围,而是呈现在div的外围.所以,我们看到了第二张效果图.
如何解决?本人比较推荐两种解决方式:
其一,为外围元素定义透明边框.具体到本例,即在样式div中加入border:1px solid #ddd;
其二,为外围元素定义内边距填充..具体到本例,即在样式div中加入padding:1px
另外,还可以通过外围元素绝对定位,或者定义子元素浮动等方式实现.
30:纯css解决多行文字垂直居中


<style type=”text/css”>
.alert{
width:400px;
height:250px;
display:table-cell;
vertical-align:middle;
line-height:1.5em;
border:1px solid red;
}
.alert_blank{
height:100%;
width:0;
display:inline;
vertical-align:middle;
zoom:1;
}
.alert_con{
width:100%;
zoom:1;
display:inline;
vertical-align:middle;
}
</style>
<div class=”alert”>
<div class=”alert_con”>哥乃多行文字垂直居中~哥乃多行文字垂直居中~哥乃多行文字垂直居中~哥乃多行文字垂直居中~</div>