本文共 21883 字,大约阅读时间需要 72 分钟。
IE、FF、Safari、OP不同浏览器兼容报告
Trident | IE浏览器(GreenBrowser绿色浏览器, |
Geckos | FireFox |
Presto | Opera |
Webkit | Safari、Chrome |
浏览器最重要或者说核心的部分是“Rendering Engine”,可大概译为“解释引擎”,不过我们一般习惯将之称为“浏览器内核”。负责对网页语法的解释(如HTML、JavaScript)并渲染(显示)网页。
浏览器内核很多,如果加上所有的几乎没有什么人在用的非商业的免费内核,那么可能大约有10款以上甚至更多,不过通常我们比较常见的大约只有以下四种,下面先简单介绍一下。
IE浏览器使用的内核,该内核程序在1997年的IE4中首次被采用,是微软在Mosaic代码的基础之上修改而来的,并沿用到目前的IE8。
由于IE本身的“垄断性”(虽然名义上IE并非垄断,但实际上,特别是从Windows 95年代一直到XP初期,就市场占有率来说IE的确借助Windows的东风处于“垄断”的地位)而使得Trident内核的长期一家独大,微软很长时间都并没有更新Trident内核,这导致了两个后果——一是Trident内核曾经几乎与W3C标准脱节(2005年),二是Trident内核的大量
Netscape6开始采用的内核,后来的Mozilla FireFox也采用了该内核,Gecko的特点是代码完全公开,因此,其可开发程度很高,全世界的程序员都可以为其编写代码,增加功能。因为这是个开源
事
目前Opera采用的内核,该内核在2003年的Opera7中首次被使用,该款引擎的特点就是渲染速度的优化达到了极致,也是目前公认网页浏览速度最快的浏览器内核,然而代价是牺牲了网页的兼容性。
苹果公司自己的内核,也是苹果的Safari浏览器使用的内核。
限于Mac OS X的使用不广泛和Safari浏览器曾经只是Mac OS X的专属浏览器,这个内核本身应该说市场范围并不大;但似乎根据最新的浏览器调查表明,该浏览器的市场甚至已经超过了Opera的Presto了——当然
google的chrome也使用webkit作为内核。
WebKit
Safari被称作世界上最快的浏览器。但是,新发布的Safari
增加了一个Reader(阅读器),取代了以往的RSS Reader。
与其他主流浏览器一样,也增加了一个默认搜索引擎的选项;
包含了Safari 5开发工具。其中有一个“web检查器”可以显示Safari与网站的整个交互过程;
增强了对HTML5的支持:包括Geolocation、全屏幕HTML5视频、 HTML5视频隐藏式字幕、新的分节元素(article、 aside、footer、header、hgroup、nav和section)、HTML5 AJAX 历史记录、EventSource、WebSocket、HTML5可拖移属性、HTML5表格验证以及HTML5 Ruby。
Windows版本的Safari 5将支持GPU浏览加速。这也是很多浏览器的新特征,可以达到更快的浏览速度;
历史记录可以按照日期搜索了。
Safari 5采用Nitro JavaScript引擎。Mac版Safari 5运行JavaScript脚本的速度比Safari 4快30%,比Chrome 5.0快3%,几乎达到火狐3.6的两倍。
通过使用DNS预读取,以及改进的网页缓存技术,Safari 5可以更快地打开网页。
Safari 5的扩展应用得到沙箱技术的保护,从而提高了安全性和稳定性。
以上数据来源:
由于不同的浏览器,比如IE6、IE7、IE8、Firefox等,对CSS的解析认识不一样,因此会导致生成的页面效果不一样,得不到我们所需要的页面效果。
这个时候我们就需要针对不同的浏览器去写不同的CSS,让它能够同时兼容不同的浏览器,能在不同的浏览器中也能得到我们想要的页面效果。 这个针对不同的浏览器写不同的CSS code的过程,就叫CSS hack,也叫写CSS hack。
不同的浏览器对CSS的解释都有一点出入,特别是padding, line-height这些要细微控制的地方,下面的hack基本可以解决这个问题:
| IE6 | IE7 | IE8 | Firefox | Chrome | Safari | | IE6 | IE7 | IE8 | FF | CH | Safari |
!important | | Y | | Y | | | Y | Y | Y | Y | Y | Y | |
_ | Y | | | | | | Y | | | | | | |
* | Y | Y | | | | | Y | Y | | | | | |
*+ | | Y | | | | | Y | Y | | | | | |
\9 | Y | Y | Y | | | | Y | Y | Y | | | | |
\0 | | | Y | | | | | | Y | | | | |
nth-of-type(1) | | | | | Y | Y | | | | | | |
整理二:IE6,IE7,FireFox,Opera,Safari兼容CSS的解决方法及CSS差别
IE6,IE7,FireFox,Opera,Safari兼容CSS的解决方法及CSS差别
有意思的测试地址:
以下两种方法几乎能解决现今所有HACK.
1, !important随着IE7对!important的支持, !important
注意:*+html
div类
1.
div里的内容,IE默认为居中,而FF默认为左对齐
可以尝试增加代码margin:auto
2.
两上下排列或嵌套的div,上面的div设置高度(height),如果div里的实际内容大于所设高度,在FF中会出现两个div重叠的现象;但在IE中,下面的div会自动给上面的div让出空间
所以为避免出现层的重叠,高度一定要控制恰当,或者干脆不写高度,让他自动调节,比较好的方法是height:100%;
但当这个div里面一级的元素都float了的时候,则需要在div块的最后,闭和前加一个沉底的空div,对应CSS是:
.float_bottom {clear:both;height:0px;font-size:0px;padding:0;margin:0;border:0;line-height:0px;overflow:hidden;}
3. clear:both;
不想受到float浮动的,就在div中写入clear:both;
4. IE浮动
#box {
float:left;
width:100px;
margin:0 0 0 100px; //这种情况之下IE会产生200px的距离
display:inline; //使浮动忽略
}
5. padding
FF设置
高度控制恰当,或尝试使用
宽度减少使用
但根据实际经验,一般FF和IE的
6. div嵌套时
FF里
IE里
FF里
7. padding,marign,height,width
注意是技巧,不是方法:
写好标准头
高尽量用padding,慎用margin,height尽量补上100%,父级height有定值子级height不用100%,子级全为浮动时底部补个空clear:both的div
宽尽量用margin,慎用padding,width算准实际要的减去padding
列表类
1. ul
先定义
2. ul和ol列表缩进问题
消除ul、ol等列表的缩进时,样式应写成: {list-style:none;margin:0px;padding:0px;}
显示类
1. display:block,inline
display:block; //可以为内嵌元素模拟为块元素
display:inline; //实现同一行排列的的效果
display:table; //for FF,模拟table的效果
display:block
总是在新行上开始;
高度,行高以及顶和底边距都可控制;
宽度缺省是它的容器的100%,除非设定一个宽度
,
display:inline
和其他元素都在一行上;
高,行高及顶和底边距不可改变;
宽度就是它的文字或图片的宽度,不可改变。
,,
2.
全部用标准的写法
背景、图片类
1. background
全部注意补齐
2.
IE: filter: progid: DXImageTransform.Microsoft.Alpha(style=0,opacity=60);
IE: filter: alpha(opacity=10);
FF: opacity:0.6;
FF: -moz-opacity:0.10;
最好两个都写,并将opacity属性放在下面
1, FF下给 div 设置 padding 后会导致 width 和 height 增加, 但IE不会.(可用!important解决)
2,
1).垂直居中.将
3,
4, FF
5, ul
6,
7,
8,html控件除了指定id,还应该加上name属性;
9,alt只能在ie下识别,FF和其它浏览器必须加title;
10,如果想按px指定宽度和高度,数字后后要带”px”,IE默认为px,但FF不识别;
11,设置表格border宽度,但看起来还是很宽,要加上style="border-collapse:collapse";
1
#1 { color: #333; } * html #1 { color: #666; } *+html #1 { color: #999; } 那么在firefox下字体颜色显示为#333,IE6下字体颜色显示为#666,IE7下字体颜色显示为#999。
2 css布局中的居中问题主要的样式定义如下:
body {TEXT-ALIGN: center;} #center { MARGIN-RIGHT: auto; MARGIN-LEFT: auto; }说明:首先在父级元素定义TEXT-ALIGN: center;这个的意思就是在父级元素内的内容居中;对于IE这样设定就已经可以了。但在mozilla中不能居中。解决办法就是在子元素定义时候设定时再加上“MARGIN-RIGHT: auto;MARGIN-LEFT: auto; ”需要说明的是,如果你想用这个方法使整个页面要居中,建议不要套在一个DIV里,你可以依次拆出多个div, 只要在每个拆出的div里定义MARGIN-RIGHT: auto;MARGIN-LEFT: auto;
3
#box{ width:600px; //for ie6.0- width:500px; //for ff+ie6.0} #box{ width:600px!important //for ff width:600px; //for ff+ie6.0 width :500px; //for ie6.0-}
4
#box{ float:left; width:100px; margin:0 0 0 100px; //这种情况之下IE会产生200px的距离 display:inline; //使浮动忽略}这里细说一下block,inline两个元素,Block元素的特点是:总是在新行上开始,高度,宽度,行高,边距都可以控制(块元素);Inline元素的特点是:和其他元素在同一行上,…不可控制(内嵌元素);
#box{ display:block; //可以为内嵌元素模拟为块元素 display:inline; //实现同一行排列的的效果 diplay:table;
5 IE与宽度和高度的问题IE不认得min-这个定义,但实际上它把正常的width和height当作有min的情况来使。这样问题就大了,如果只用宽度和高度, 正常的浏览器里这两个值就不会变,如果只用min-width和min-height的话,IE下面根本等于没有设置宽度和高度。 比如要设置背景图片,这个宽度是比较重要的。要解决这个问题,可以这样: #box{ width: 80px; height: 35px;}html>body #box{ width: auto; height: auto; min-width: 80px; min-height: 35px;}
6
7
8 DIV浮动IE文本产生3象素的bug左边对象浮动,右边采用外补丁的左边距来定位,右边对象内的文本会离左边有3px的间距.
#box{ float:left; width:800px;}#left{ float:left; width:50%;}#right{ width:50%;}*html #left{ margin-right:-3px; //这句是关键} HTML代码
9
10 IE捉迷藏的问题当div应用复杂的时候每个栏中又有一些链接,DIV等这个时候容易发生捉迷藏的问题。 有些内容显示不出来,当鼠标选择这个区域是发现内容确实在页面。解决办法:对#layout使用line-height属性 或者给#layout使用固定高和宽。页面结构尽量简单。
11
p对象中的内容
内置与外置写法
外置:
.main{ float:left;#float:none;_float:none;
html*.main{ float:left;#float:none;_float:none; }
*+html .main{ float:left;#float:none;_float:none; }
* html .main{ float:left;#float:none;_float:none; }
第1行给Firefox以及其他浏览器看
第2行给safari/IE6/iE7看,如果safari/IE6/iE7 视觉效果不统一,就要在后面跟IE6/IE7的定义
第3行给IE7看
第4行给IE6以及更老的版本看
内置:
.main{ float:left;#float:none;_float:none;[float:none;]float:none; }
第1个float给Firefox以及其他浏览器看
第2个加#的float给IE7看
第3个加_的float给IE6以及更老的版本看
第4个加[的float给safari看
第5个加]的float给IE看
各种常见浏览器使用的内核
Mozilla Firefox ( Gecko ) Internet Explorer ( Trident ) Opera ( Presto ) Konqueror ( KHTML ) Safari Swift ( WebKit )
用css自动隐藏超出宽度内容并省略显示,浏览器兼容ie、ff text-overflow:ellipsis; -o-text-overflow:ellipsis; -icab-text-overflow: ellipsis; -khtml-text-overflow: ellipsis; -moz-text-overflow: ellipsis; -webkit-text-overflow: ellipsis;
IE、Firefox、Opera和Safari对CSS样式important和*的支持
1、IE6、IE7都支持 *,但IE8终于回归正统,放弃了对*的支持 2、IE7、IE8、Firefox、Opera、Safari都支持 important
顾名,important的优先级要高. 举例说明:
IE6选择最后一个,即:background-color:#000000; (因为IE6对important不感冒) IE7选择第二个,即:background-color:#000000;(因为IE7开始对important感冒了,同时还死守着它对 * 感情的最后一版本,但important并未起到优先级的作用) IE8和Firefox、Opera、Safari选择第一个,即:background-color:#FF0000 !important;(IE8完全感冒于important,同时丢弃了对*的感情)
另外再补充一个,下划线”_“, IE6支持下划线,IE7、IE8和Firefox、Opera、Safari均不支持下划线。
1、
2、
3、
复制代码代码如下:
selector{ property:value; property:value\9; +property:value; _property:value; }当然,注意顺序。根据CSS的优先性,上面的写法,分别针对Firefox、IE8、IE7和IE6显示值。让我们看看这个演示:
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> http://www.w3.org/1999/xhtml"> 演示:
复制代码代码如下:
p.ie{ height:60px;text-align:center;line-height:60px;border:1px dashed #bbb;background:#f7f7f7;font:15; color:blue; //哈,事实就这么简单。你看到的是那一句话呢?如果你多个浏览器都测试了,就会看到,显示的文字和颜色是不同的。为什么?看看我的HTML中这个段落是这样写的:
复制代码代码如下:
嘿嘿,小子竟然也用Firefox,蓝色文字。对,就是IE条件注释+CSS的结果。顺路学一下IE条件注释吧。不用再举例了吧,一看就知道那个对那个了。
display:block;//这个一定要加!!!text-overflow:ellipsis;
overflow:hidden;
white-space:nowrap;
CSS
一、Outline
在调试CSS问题的时候,我常常在指定元素上添加border来精确的查看该Example Source Code
h2
Example Source Code
div.clipped
Example Source Code
div.clipped
Example Source Code
input:focus
IE,FF均不支持,Safari和GOOLE支持
下面列出JS在IE和FF下不兼容的方法
1、Dom操作
var
var
var
var
var
2、HTML控件如果没有ID,应该加上id属性:
Not compatible:
tmpHtml.Append("
Compatible:
tmpHtml.Append("
3、不要用eval,而改为getElementById,eval在IE下可以使用,但FF里有时不支持或转换出错:
Not compatible:
objField1 =
Compatible:
objField1 =
4、
Not compatible:
aRows(i).cells
Compatible:
aRows[i].cells
5、
Not compatible:
var
Compatible:
var
var str =
6、
Not compatible:
oSel.options.remove(oSel.selectedIndex);
Compatible:
oSel.remove(oSel.selectedIndex);
7、
Not compatible:
top:
width:expression(document.getElementByIdx_x('CenterDIV').offsetWidth-16+'px');
Compatible:
改用JS方法;
8、
Not compatible:
div.attachEvent("onmouseleave",new
Compatible:
If(windows.isIE)
div.attachEvent("onmouseleave",new
else
div.attachEvent("onmouseout",new
9、FF不支持document.readyState!="complete"
10、FF不支持window.createPopup();
11、FF不支持document.body.scrollLeft
Not compatible:
var
Compatible:
var
FF使用下列属性时要小心:
scrollHeight|scrollLeft|scrollTop|scrollWidth
12、FF指定宽度或高度为像素时要加”px”:
Not compatible:
document.getElementByIdx_x(strObjId).style.width =
Compatible:
document.getElementByIdx_x(strObjId).style.width =
13、style=”cursor:hand”
Not compatible:
style=”cursor:hand”
Compatible:
style=”cursor:pointer”
14、alt后必须加title:
Not compatible:
sbdTempHtml.Append("
Compatible:
sbdTempHtml.Append("
15、在tr里,FF不支持“display:block”
Not compatible:
document.getElementByIdx_x("hrmtr").style.display =
Compatible:
document.getElementByIdx_x("hrmtr").style.display =
16、FF使用滤镜功能时,要设置透明度
Not compatible:
filter:alpha(opacity=50);
Compatible:
filter:alpha(opacity=50);
-moz-opacity:0.5;
if (!windows.isIE)
obj.style.MozOpacity = 0.5;
17、全选
在IE里我们可以用 “objInput.select()”
Compatible:
if ( windows.isIE )
18、用js插入行或列时应注意:
Not compatible:
Compatible:
19、我们常常设置表格宽度和高度少于20px时,往往在FF里没有效果:
Not Compatible:
Compatible:
20、在IE里插入空白行时不会显示,但在FF里会显示出来
Not Compatible:
sbdTempHtml.Append("
");sbdTempHtml.Append("
");
Compatible:
sbdTempHtml.Append(" ");
21、在IE里document.mainform.elements[“…”]可以取到对象,但FF不行:
Not Compatible:
document.mainform.elements[“imgID”]
Compatible
document.getElementById(“imgID”)
22、FF里有textContent属性,但IE只有innerText
Not Compatible:
div.innerText
Compatible
if(windows.isIE)
{div.innerText}
else
{div.textContent}
23、在IE,attachEvent可以正常使用,但FF里有时不行,比如在iframe里:
Not Compatible:
obj.contentWindow.document.attachEvent("onkeyup", function(){updateCharCount(obj.id);});
Compatible
if(windows.isIE)
{
}
else
{
obj.contentWindow.document.addEventListener("keyup", function(){updateCharCount(obj.id);},false);
}
24、runtimeStyle不支持,应改为style
25、window.execScript
var jsCode = "var a = 1;";
if (window.execScript) {
window.execScript(jsCode, "JavaScript");
} else {
window.eval_r(jsCode);
}
26、obj.style.display=”block”不支持,应为obj.style.display=””
27、document.createElement_x在FF和Safari里不支持直接传入HTML,如:
Not Compatible:
document.createElement_x("");
Compatible
var
28、在Ipad Safari里,不支持滚动条overflow.
29、在Ipad Safari里,不支持下载
if
Not Compatible:
f.src=url;
}
window.open(url);
更多详细请google文章: Jscript Deviations from ES3
IE8里的64个BUG:
集合类对象问题
现有代码中存在许多
解决方法:
改用
说明:IE下,可以使用()或[]获取集合类对象;Firefox下,只能使用[]获取集合类对象.
解决方法:统一使用[]获取集合类对象.
window.event
现有问题:
使用
解决方法:
FF
原代码(可在IE中运行):
提交" οnclick="javascript:gotoSubmit()"/>
新代码(可在IE和FF中运行):
提交" οnclick="javascript:gotoSubmit(event)"/>
此外,如果新代码中第一行不改,与老代码一样的话(即
HTML
现有问题:
在
解决方法:
用
用idName字符串取得对象的问题
现有问题:
在IE中,利用
解决方法:
用
变量名与某
现有问题:
在
解决方法:
在声明变量时,一律加上
此外,最好不要取与
event.x
现有问题:
在IE
解决方法:
在FF中,与event.x
故采用
event.clientX
如果要完全一样,可以稍麻烦些:
mX = event.x ? event.x : event.pageX;
然后用
其它:
event.layerX
关于frame
现有问题:
在
解决方法:
在frame的使用方面FF和ie的最主要的区别是:
如果在frame标签中书写了以下属性:
| ||
转载地址:http://eoqdi.baihongyu.com/