Web 浏览器兼容相关积累

HTML web前端开发

• IE6/7 CSS兼容性写法的注意点

 //尽量完善CSS的写法，比如：
 .text{
   position:absolute;
   top:0;
   left:0;
  }
 //既然使用了position,那么相关的top，left值就必须写出来，不然会导致浏览器计算有问题从而不能默认top:0;或者left:0;

• 解决IE6及更早浏览器浮动时产生双倍边距的BUG？

display:inline;//设置该元素的display属性为inline即可。

• 解决ie7浏览器margin失效

 padding//改用padding去实现margin的效果，这样涉及到HTML标签结构新增父级div添加padding

• 清除图片下方出现几像素的空白间隙

 //方法一
 img{display:block;}
 //方法二
 img{vertical-align:top;}//还可以设置为text-top | middle | bottom | text-bottom
 //方法三
 .parent{font-size:0;line-height:0;}//#test为img的父元素

• 解决IE6及更早浏览器下的3像素BUG

//在IE6及更早浏览器下为.content设置margin-right:-3px；也可以设置.aside为浮动
//但是要注意如果使用了float就将出现【浮动时产生双倍边距的BUG】
.a      {color:#f00;}
.main   {width:950px;background:#eee;}
.content{float:left;width:750px;height:100px;background:#ccc;
        _margin-right:-3px;}
.aside  {height:100px;background:#aaa;}
<div class="main">
    <div class="content">content</div>
    <div class="aside">aside</div>
</div>

• 解决ie6 position fixed 失效

/*让修复IE6 position:fixed不可用的Bug! */
/* 头部固定 */
.fixed-top{position:fixed;bottom:auto;top:0px;}
/* 底部固定 */
.fixed-bottom{position:fixed;bottom:0px;top:auto;}
/* 左侧固定 */
.fixed-left{position:fixed;right:auto;left:0px;}
/* 右侧固定 */
.fixed-right{position:fixed;right:0px;left:auto;}
/* 上面的是除了IE6的主流浏览器通用的方法 */
/* 修正IE6振动bug */
* html, * html body{background-image:url(about:blank);background-attachment:fixed;}
/* IE6 头部固定定位 */
* html .fixed-top{position:absolute;bottom:auto;
top:expression(eval(document.documentElement.scrollTop));}
/* IE6 右侧固定定位 */
* html .fixed-right{position:absolute;right:auto;
left:expression(eval(document.documentElement.scrollLeft+document.documentElement.clientWidth-this.offsetWidth)-(parseInt(this.currentStyle.marginLeft, 10)||0)-(parseInt(this.currentStyle.marginRight, 10)||0));}
/* IE6 底部固定定位 */
*html .fixed-bottom{position:absolute;bottom:auto;
top:expression(eval(document.documentElement.scrollTop+document.documentElement.clientHeight-this.offsetHeight-(parseInt(this.currentStyle.marginTop, 10)||0)-(parseInt(this.currentStyle.marginBottom, 10)||0)));}
/* IE6 左侧固定定位 */
* html .fixed-left{position:absolute;right:auto;
left:expression(eval(document.documentElement.scrollLeft));}