工做中遇到的瀏覽器差異（就不叫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......

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。