GVKun编程网logo

IE6、IE7、IE8的CSS、JS兼容(贴吧热门评论)

24

对于想了解IE6、IE7、IE8的CSS、JS兼容的读者,本文将提供新的信息,我们将详细介绍贴吧热门评论,并且为您提供关于CSSHACK兼容列表Firefox,IE5,IE5.5,IE6,IE7,IE

对于想了解IE6、IE7、IE8的CSS、JS兼容的读者,本文将提供新的信息,我们将详细介绍贴吧热门评论,并且为您提供关于CSS HACK 兼容列表 Firefox, IE5, IE5.5, IE6, IE7, IE8、CSS hack-实现IE6、IE7、Firefox兼容、Css hacker for ie6、ie7、firefox、CSS Hack代码范例:兼容IE5.0、IE5.5、IE6.0、IE7.0、FF1.5、FF2.0的有价值信息。

本文目录一览:

IE6、IE7、IE8的CSS、JS兼容(贴吧热门评论)

IE6、IE7、IE8的CSS、JS兼容(贴吧热门评论)

Internet Explorer 6中查看使用 Microsoft JScript 的网页,可能会遇到web浏览器速度较慢的性能问题。原因是如果js脚本同时创建大量变量,jscript引擎执行垃圾收集算法时会监视脚本中变量分配的数量、脚本中使用的文字值的数量和脚本中分配的字符串值的总大小,如果超过这些值的阈值,就会发生垃圾收集,垃圾收集进程会中断正在运行的脚本。因此,这些运行中的脚本将被挂起,直至垃圾收集完成为止。

IE6 、 IE7 、 IE8 在 CSS 和 JS 方面的区别 :

1、IE8中的css中关于width或是height中如果使用像素形式作为参数时,参数必须是带“px”的,而且此参数必须是大于0的,而在IE6和IE7中是支持不带“px”参数的,而且参数是可以为一个负数。

2、如:style=height:180px\\0;只有IE8能识别,style=height:180px\\9,IE都能识别。

2、IE8中的css中“border-style:outset ;”是没有效果的。

3、IE8中的无序列表之间的距离要比IE6和IE7大的多。

4、IE6能识别*,但不能识别!important,IE7能识别*也能识别!important。

5、IE6支持下划线,IE7不支持下划线。

6、在IE8中,一个Iframe中取event.x的值不是Iframe中的相对x坐标,而是最外层的window的x坐标,但是event.y却是取的是 Iframe中的相对y坐标。而在IE6和IE7中,event.x和event.y却得的都是所在Iframe中的相对坐标,可以用 event.clinetX代替。

7、IE8中的javascript中的function对象例如:

function a(){alert(“helloworld”);}

var fun = new function(‘’,’helloworld’);

alert(fun);

此时返回的值为function anonymous(){function a(){alert(“helloworld”)}},而在IE6和IE7中返回的值为function anonymous(){alert("helloworld")},也就是说当Function的第二个参数如果是一个函数时,IE8对此参数作用的是整个函数的代码,而IE6和IE7则是对此参数起作用的是函数的内部代码(不包括 “function a(){”和“}”的函数头和尾)。

8、在ie6中,使用window.status =" 欢迎光临我的博客!!!",就能在状态栏显示这么一行字,但在IE7中,IE7的安全性设置中,默认是不允许脚本更新状态栏的.

9、IE8会把对 IE6,7,8 用 css 进行测试:

测试代码:样式代码: p {color:#f00;} xhtml 代码:  

 文字

 

IE6

IE7

IE8

备注

p{_color:red}

×

×

IE6 专用

*html   p{color:#red;}

×

×

IE6 专用

p{+color:red}

×

IE6,7 专用

p{*color:red}

×

IE6,7 专用

*html   p{color:red;}

×

IE6,7 专用

p{*+color: red}

×

×

IE7 专用

Body> p{ color: red }

×

屏蔽 IE6

/*\\*//*/p{+color:red}/**/

×

×

IE8 专用

p{/*/*/color;/**/}

×

屏蔽 IE8

p{color:red!important}

p{color:red}

都能用

html>/**/body .head{color:#red;}

×

×

只对 IE8

 

对于 IE8 对 js 新增的功能 :

1、 IE8开始支持一些新的W3C规格,其中多了querySelector和querySelectorAll两个函数

2、 IE8 引入XDomainRequest跨站数据获取功能。 这是一个非常有趣的进行跨站数据获取的功能,不过它与Firefox 3中的跨站 XMLHttpRequest的工作原理不太一样。它的跨域并不是无限制的。需要服务端返回http header中带有XDomainRequestAllowed=1才可以跨域,否则是不成功的。XMLRequest 不能跨站一直都是多子域服务器的硬伤。使得很多情况不得不考虑最原始的动态script和JSON的方式。不过IE8团队有意解决跨站访问数据的问题,这是IE8的一个进步。另外,IE8下的XMLHttpRequest增加了一个很重要的属性 timeout和ontimeout方法,它在对程序进行优化时极其重要。

3、 getElementById可以通过id来返回对象。getAttribute("checked") 现在返回“checked”而不是true。动态创建(或修改)的单选按钮现在可以被选择了。

支持更多对HTML5的功能:

1、 window.location.hash。这个功能已经被多数浏览器支持的非常好。在IE8标准模式中将window.location.hash中的更改作为导航,并保存先前文档的URL,可以像在Ajax应用中模仿“后退”按钮效果。IE8中对它进行了改良,可以广播这个hashchanged时间。

2、 DOM存储。通过这个功能,数据可以持续保存在本地,它将取代原始的cookie存DOM存储。

3、 postMessage。IE8现在支持跨文件消息通讯(Cross-Document Messaging-XDM)!通过onmessage事件和postMessage方法,两个来自不同域的网页可以进行通讯。目前IE8、Opera 9、Firefox 3和WebKit nightlies版均支持这个功能,也就是说,该功能几乎已被所有最新浏览器支持。

4、 Offline Events。在IE 8中拥有一些离线事件来检测网络的中断,通过它我们可以编写精彩的离线Ajax应用。目前来看支持这一功能的浏览器包括Firefox3和IE8。

用firefox或者chrome一登陆最小系统就报480分钟超时错误

IE6 Bugs

1 、不支持用样式设置 <abbr> 元素

2 、不支持以连字符和下划线开头的 class ID

3 <select> 元素总是出现在堆叠最上面,而无视 z-index

4 、如果锚点的伪类没有使用正确的顺序 ( :link ,:visited , :hover ) ,:hover 伪类将无效

5 、一个属性的 !important 声明会被同一规则中同一属性的没有使用 !important 的第二个声明覆盖。

6、         height 表现类似于 min-height width 表现类似于 min-width ,左右 margin 双倍

7、         圆点边框 (dotted) 看起来像虚线边框 (dashed)

8、         text-decoration line-through 值在文字上看起来比别的浏览器要高一些

9 、有序列表如果有一个固定结构 (haslayout true ,不能设置 li 的高度 / 宽度 /zoom 等激活 haslayout 的值 ) ,序号就不会增加,而是保持为 1

10、      列表元素不支持 list-style-type 的所有可用的值

11、      如果列表条目浮动,指定的 list-style-image 将不会显示

12、      不完全支持 @font-face

13、      某些选择器会错误的匹配注释和文档声明

14、      如果一个 ID 选择器结合一个类选择器不匹配,同样的 ID 选择器结合不同的类选择器也将被当作不匹配。

IE7 bugs

1 有序列表如果有一个固定结构 (haslayout true ,不能设置 li 的高度 / 宽度 /zoom 等激活 haslayout 的值 ) ,序号就不会增加,而是保持为 1

2、         列表元素不支持 list-style-type 的所有可用的值

3 、如果列表条目浮动,指定的 list-style-image 将不会显示

4 、不完全支持 @font-face

5 、某些选择器会错误的匹配注释和文档声明


CSS HACK 兼容列表 Firefox, IE5, IE5.5, IE6, IE7, IE8

CSS HACK 兼容列表 Firefox, IE5, IE5.5, IE6, IE7, IE8

解决现今所有HACK.

1,!important

方法现在只针对IE6的HACK.(注意写法.记得该声明位置需要提前.)

#wrapper { width: 100px!important; /* IE7+FF */ width: 80px; /* IE6 */ }

2,IE6/IE7 对 Firefox

不支持.而*+html 又为 IE7特有标签.

#wrapper { #wrapper { width: 120px; } /* FireFox */ *html #wrapper { width: 80px;} /* ie6 fixed */ *+html #wrapper { width: 60px;} /* ie7 fixed,注意顺序 */ }

加上 class=”clearfix” 即可,屡试不爽.

/* Clear Fix */

.clearfix:after
{
content:”.”;
display:block;
height:0;
clear:both;
visibility:hidden;
}
.clearfix
{
display:inline-block;
}
/ Hide from IE Mac /
.clearfix {display:block;}
/ End hide from IE Mac /
/ end of clearfix /

解决)2,居中问题.1).垂直居中.将 line-height 设置为 当前 div 相同的高度,再通过 vertical-align: middle.( 注意内容不要换行.)2).水平居中. margin: 0 auto;(当然不是万能)3,若需给 a 标签内内容加上 样式,需要设置 display: block;(常见于导航标签)4,FF 和 IE 对 Box 理解的差异导致相差 2px 的还有设为 float的div在ie下 margin加倍等问题.5,ul 标签在 FF 下面默认有 list-style 和 padding . 最好事先声明,以避免不必要的麻烦. (常见于导航标签和内容列表)6,作为外部 wrapper 的 div 不要定死高度,最好还加上 overflow: hidden.以达到高度自适应.7,关于手形光标. cursor: pointer. 而hand 只适用于 IE.

1 针对firefox ie6 ie7的css样式

页面没按要求显示!找到一个针对IE7不错的hack方式就是使用“*+html”,现在用IE7浏览一下,应该没有问题了。现在写一个CSS可以这样:

显示为#666,IE7下字体颜色显示为#999。

2 css布局中的居中问题

解决办法就是在子元素定义时候设定时再加上“MARGIN-RIGHT: auto;MARGIN-LEFT: auto; ” 需要说明的是,如果你想用这个方法使整个页面要居中,建议不要套在一个DIV里,你可以依次拆出多个div,只要在每个拆出的div里定义MARGIN-RIGHT: auto;MARGIN-LEFT: auto; 就可以了。

3 盒模型不同解释

<pre><font size="4">#Box{ width:600px; //for ie6.0- w\idth:500px; //for ff+ie6.0}

Box{ width:600px!important //for ff width:600px; //for ff+ie6.0 width /**/:500px; //for ie6.0-}

4 浮动ie产生的双倍距离

body #Box{ width: auto; height: auto; min-width: 80px; min-height: 35px;}

6 页面的最小宽度

一个

一个类:然后CSS这样设计:#container{ min-width: 600px; width:expression(document.body.clientWidth < 600? “600px”: “auto” );}第一个min-width是正常的;但第2行的width使用了Javascript,这只有IE才认得,这也会让你的HTML文档不太正规。它实际上通过Javascript的判断来实现最小宽度。

7 清除浮动

display:table; //将对象作为块元素级的表格显示}或者.hackBox{ clear:both;} 或者加入:after(伪对象),设置在对象后发生的内容,通常和content配合使用,IE不支持此伪对象,非Ie 浏览器支持,所 以并不影响到IE/WIN浏览器。这种的最麻烦的……#Box:after{ content: “.”; display: block; height: 0; clear: both; visibility: hidden;}

8 DIV浮动IE文本产生3象素的bug

HTML代码

9 属性选择器(这个不能算是兼容,是隐藏css的一个bug)

属性选择器的范围比较大,如p[id]中,所有p标签中有id的都是同样式的.

10 IE捉迷藏的问题

内容显示不出来,当鼠标选择这个区域是发现内容确实在页面。解决办法:对#layout使用line-height属性 或者给#layout使用固定高和宽。页面结构尽量简单。

11 高度不适应

p对象中的内容

Box {background-color:#eee; }#Box p {margin-top: 20px;margin-bottom: 20px; text-align:center; }解决方法:在P对象上下各加2个空的div对象CSS代码:.1{height:0px;overflow:hidden;}或者为DIV加上border属性。

CSS hack-实现IE6、IE7、Firefox兼容

CSS hack-实现IE6、IE7、Firefox兼容

由于不同的浏览器,比如Internet Explorer 6,Internet Explorer 7,Mozilla Firefox等,对CSS的解析认识不一样,因此会导致生成的页面效果不一样,得不到我们所需要的页面效果。

这个时候我们就需要针对不同的浏览器去写不同的CSS,让它能够同时兼容不同的浏览器,能在不同的浏览器中也能得到我们想要的页面效果。

这个针对不同的浏览器写不同的CSS code的过程,就叫CSS hack。

区别不同浏览器,CSS hack有不同的写法:

区别IE6与FF:

background:orange;*background:blue;

区别IE6与IE7:

background:green !important;background:blue;

区别IE7与FF:

background:orange; *background:green;

区别FF,IE7,IE6:

background:orange;*background:green !important;*background:blue;

注意事项:
◆IE都能识别*;标准浏览器(如FF)不能识别*;
◆IE6能识别*,但不能识别 !important,
◆IE7能识别*,也能识别!important;
◆FF不能识别*,但能识别!important;

另外再补充一个,下划线_,

IE6支持下划线,IE7和firefox均不支持下划线。

于是大家还可以这样来区分IE6,IE7,Firefox

background:orange;*background:green;_background:blue;

注:不管是什么方法,书写的顺序都是firefox的写在前面,IE7的写在中间,IE6的写在最后面。

总结

以上是小编为你收集整理的CSS hack-实现IE6、IE7、Firefox兼容全部内容。

如果觉得小编网站内容还不错,欢迎将小编网站推荐给好友。

Css hacker for ie6、ie7、firefox

Css hacker for ie6、ie7、firefox

区别不同浏览器,CSS hack写法:

区别 IE6FF
background:orange;*background:blue;

区别 IE6IE7
background:green !important;background:blue;

区别 IE7FF:   
background:orange; *background:green;

区别 FFIE7IE6: 
background:orange;*background:green !important;*background:blue;

注:IE都能识别*;标准浏览器(如FF)不能识别*;
IE6能识别*,但不能识别 !important,
IE7能识别*,也能识别!important;
FF不能识别*,但能识别!important;
  IE6 IE7 FF
* ×
!important ×

另外再补充一个,下划线"_",
IE6支持下划线,IE7和firefox均不支持下划线。
于是大家还可以这样来区分IE6,IE7,firefox

background:orange;*background:green;_background:blue;

注:不管是什么方法,书写的顺序都是firefox的写在前面,IE7的写在中间,IE6的写在最后面。

 

CSS Hack代码范例:兼容IE5.0、IE5.5、IE6.0、IE7.0、FF1.5、FF2.0

CSS Hack代码范例:兼容IE5.0、IE5.5、IE6.0、IE7.0、FF1.5、FF2.0

<a href="http://www.52css.com/article.asp?id=280"&gt;http://www.52css.com/article.asp?id=280

关于IE6、IE7、IE8的CSS、JS兼容贴吧热门评论的介绍现已完结,谢谢您的耐心阅读,如果想了解更多关于CSS HACK 兼容列表 Firefox, IE5, IE5.5, IE6, IE7, IE8、CSS hack-实现IE6、IE7、Firefox兼容、Css hacker for ie6、ie7、firefox、CSS Hack代码范例:兼容IE5.0、IE5.5、IE6.0、IE7.0、FF1.5、FF2.0的相关知识,请在本站寻找。

本文标签: