工做中遇到的浏览器差异（就不叫IE6bug了）

时间 2019-12-20

原文原文链接

一、根据ie版本写csscss

 <!--[if lt IE 8]>
 <style> 
.cntContainer{margin-top: -1px;} 
 </style>
<![endif]-->

非ie：if !IE; 仅IE：if IE; 等于：if IE 6; html

大于：if gt IE 8; 大于或等于：if gte IE 8; 小于或等于： if lte IE 8; jquery

二、关于display:table-row;chrome

好比table中的tr，在js里控制它显示和不显示：document.getElementById('theBlueRow').style.display='table-row'和display:none。IE6不支持table-row，改用display=''。就能够了。express

三、获取设置节点的自定义属性：浏览器

对于<div id="newTest" myAttr="old"></div>。测试

获取自定义属性myAttr：url

如果document.getElementById("newTest").myAttr,则只对IE六、IE8有效，IE九、IE十、chrome、firefox、safari对无效；spa

如果document.getElementById("newTest").getAttribute('myAttr')则都有效。firefox

设置自定义属性：

如果document.getElementById("newTest").myAttr = "new";

alert(document.getElementById("newTest").myAttr+","+document.getElementById('newTest').getAttribute('myAttr'));

输出结果：IE九、IE十、firefox、chrome、safari均为:new,old。IE六、IE8则为:new,new。

如果document.getElementById("newTest").setAttribute("myAttr","new");

alert(document.getElementById("newTest").myAttr+","+document.getElementById('newTest').getAttribute('myAttr'));

输出结果：IE九、IE十、firefox、chrome、safari均为:undefined,new。IE六、IE8则为:new,new。

因此为了兼容性，获取和设置自定义属性时统一使用：.getAttribute('myAttr')和.setAttribute("myAttr","new"); 获取jquery的方法.attr();

四、ie六、7里，若是<td></td>则设置td的border无效；
若是是<td> </td>则设置td的border有效.

（在tr上设置border在ie六、7中老是无效的。）

五、IE6里弹出层或是说设置了position：absolute/fixed;的div遮不住select。

解决办法：经过一个与绝对定位的div一样大小的iframe来遮住select。

<div id='fixedDiv>
    <div id='fixedDivContent'>div content</div>
    <iframe scrolling='no' iframeborder='0' style='position:absolute;left:0;top:0;height:??px;width:100%;z-index:-1'>
    </iframe>
</div>

其中的iframe的高度和宽度不能同时是100%。

六、ie6不支持position:fixed;的解决方法：

纯参考完美解决IE6不支持position:fixed的bug

#fixedDiv{    position: fixed;top:0;left:0;}     
/*for ie6*/
*html #fixedDiv{ position:absolute;
left:expression(eval(document.documentElement.scrollLeft+20));
top:expression(eval(document.documentElement.scrollTop+20))}

可是这样在滑动的时候，这个fixeDiv在它该待的地方有很明显的振动，缘由是‘

IE有一个多步的渲染进程。当你滚动或调整你的浏览器大小的时候，它将重置全部内容并重画页面，这个时候它就会从新处理css表达式。这会引发一个丑陋的“振动”bug，在此处固定位置的元素须要调整以跟上你的(页面的)滚动，因而就会“跳动”。
解决此问题的技巧就是使用background-attachment:fixed为body或html元素添加一个background-image。这就会强制页面在重画以前先处理CSS。由于是在重画以前处理CSS，它也就会一样在重画以前首先处理你的CSS表达式。这将让你实现完美的平滑的固定位置元素！

’，添加下列代码后就彻底看不出振动了：

* html,* html body{
background-image:url(about:blank);
background-attachment:fixed;//不可少，防止画面闪烁
}

不要直接用<html>作测试，记得写<!DOCTYPE......