工作中遇到的浏览器差别(就不叫IE6bug了)_html/css_WEB-ITnose

WBOY
Freigeben: 2016-06-24 11:26:54
Original
1032 Leute haben es durchsucht

1、根据ie版本写css

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

非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、获取设置节点的自定义属性:

对于

获取自定义属性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();

4、ie6、7里,如果则设置td的border无效;
如果是 则设置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>    
Nach dem Login kopieren

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

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))} 
Nach dem Login kopieren

但是这样在滑动的时候,这个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;//不可少,防止画面闪烁}
Nach dem Login kopieren

 不要直接用做测试,记得写.....

Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage