56net亚洲必赢:工作中遇到的浏览器差别(就不叫IE6bug了),差别ie6bug

来源:未知作者:运维 日期:2019/12/25 18:06 浏览:

后日遭逢贰个主题素材, 当隐敝表格行 Tr 时 $id.style.setAttribute('cssText',"display:none;"卡塔尔国;, 表格行 Tr 里面的select 在 IE6 中潜藏不住,如故交易会示在页面此中。想单独设置 select 的体裁为蒙蔽 $id("new_attpm_id2_" + id卡塔尔.style.setAttribute('cssText',"display:none;"卡塔尔(英语:State of Qatar); 也暗藏不住,上网找搜索到小说《IE6下,js通过css隐蔽select的贰个bug》,原本那是 IE6 的叁个 Bug ,可以经过 style.display = "none";使其规避。 最终代码如下 $id("new_attpm_id2_" + id卡塔尔国.style.display = "none"; 难点顺遂消除。 请在ie6下开采:ie6_js_hidden_select_bug.html 通过: document.getElementById.style.display = 'none'; 能够掩没select成分。 然而因此: document.body.id = 'page'; 协作css代码: #page select { display: none; } 在ie6下,无法隐蔽select成分。 尝试position, setTimeout, 改造zoom到1.001等办法,均未果。 想起ie6下,臭名昭彰的select必要用iframe遮罩的bug,预计和地方的bug根由是相仿的:在ie6下,select是windowed element,其展现和日常性的HTML elements有真相上的界别。至于到底为啥?揣测只可以去看微软的源码了。

做事中际遇的浏览器差距(就不叫IE6bug了),差异ie6bug

1、根据ie版本写css

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

 非ie:if !IE;          仅IE:if IE;                     等于:if IE 6;    

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

2、关于display:table-row;

举个例子说table中的tr,在js里决定它展现和不显得:document.getElementById('theBlueRow'卡塔尔.style.display='table-row'和display:none。IE6不扶植table-row,改用display=''。就能够了。

3、获取设置节点的自定义属性:

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

获得自定义属性myAttr:

若是document.getElementById("newTest").myAttr,则只对IE6、IE8有效,IE9、IE10、chrome、firefox、safari对无效;

若是document.getElementById("newTest"卡塔尔(قطر‎.getAttribute('myAttr'卡塔尔(قطر‎则都灵验。

设置自定义属性:

若是document.getElementById("newTest").myAttr = "new";

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

输出结果:IE9、IE10、firefox、chrome、safari均为:new,old。IE6、IE8则为:new,new。

若是document.getElementById("newTest").setAttribute("myAttr","new"); 

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

出口结果:IE9、IE10、firefox、chrome、safari均为:undefined,new。IE6、IE8则为:new,new。

故此为了宽容性,获取和设置自定义属性时统一运用:.getAttribute('myAttr'卡塔尔和.setAttribute("myAttr","new"卡塔尔; 获取jquery的方法.attr(卡塔尔(英语:State of Qatar);

4、ie6、7里,如果<td></td>则设置td的border无效;
     如果是<td> </td>则设置td的border有效.

(在tr上安装border在ie6、7中一而再再而三无效的。)

5、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的万丈和增长幅度不能够并且是百分百。

6、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......

1、根据ie版本写css !--[if lt IE 8] style .cntContainer{margin-top: -1px;} /style![endif]-- 非ie:if...