对于想了解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兼容(贴吧热门评论)
- 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兼容(贴吧热门评论)
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
解决现今所有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 页面的最小宽度
一个
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对象中的内容
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 hack写法:
background:orange;*background:blue;
background:green !important;background:blue;
background:orange; *background:green;
background:orange;*background:green !important;*background:blue;
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
<a href="http://www.52css.com/article.asp?id=280">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的相关知识,请在本站寻找。
本文标签: