【1】为什么会出现浏览器兼容问题
在各大浏览器厂商的发展过程中，它们对web的标准各有不同的实现，标准不同存在差异所以产生兼容性的问题。
【2】浏览器内核以及代表作品
- IE浏览器内核：Trident内核；
- Chrome浏览器内核：以前是Webkit内核，现在是Blink内核；-
- Firefox浏览器内核：Gecko内核；
- Safari浏览器内核：Webkit内核；
- Opera浏览器内核：以前是Webkit，现在是Blink内核；
- 360浏览器、猎豹浏览器内核：IE+Chrome双内核；
- 搜狗、遨游、QQ浏览器内核：Trident（兼容模式）+Webkit（高速模式）；
- 百度浏览器、世界之窗内核：IE内核；
【3】有关浏览器兼容的概念
- CSS BUG
Css样式在各浏览器中解析不一致的情况，或者说Css样式在浏览器中不能正确显示的问题称为CSS Bug - CSS hack
CSS中，hack是指一种兼容css在不同浏览器中正确显示的技巧方法，因为他们都属于个人对css代码的非官方的修改，或非官方的补丁。有些人更喜欢使用patch（补丁）来描述这种行为。 - Filter
它是一种对特定的浏览器或浏览器组显示或隐藏规则或声明的方法。本质上讲，filter是一种用来过滤不同浏览器的hack类型。
- _下划线过滤器
当一个属性前面增加一个下划线后，由于符合标准的浏览器不能识别带有下划线的属性而忽略了这个声明。但是ie6及更低版本浏览器会继续解析。
语法：选择器{_属性：属性值；} 此方法是区分ie6浏览器和其他浏览器的方法 - ！important关键字过滤器
它表示所附加的声明具有最高优先级的意思，被浏览器优先显示（ie6不识别此写法）
语法：选择符{属性：属性值！important；} - "* "属性过滤器
当一个属性前面加了 "* "后，该属性能被ie7及以下浏览器识别，其他浏览器忽略该属性的作用
语法：选择器{*属性：属性值；} - +属性过滤器
当一个属性前面加了+后，该属性能被ie7及以下浏览器识别，其他浏览器忽略该属性的作用
语法：选择器{+属性：属性值；} - +属性过滤器
当一个属性前面加了+后，该属性能被ie7浏览器识别，其他浏览器忽略该属性的作用
语法：选择器{*+属性：属性值；} - \9
ie版本识别，其他浏览器不识别
语法：选择符{属性：属性值\9;} - \0
ie8及以上浏览器识别，其他浏览器不识别
语法：选择符{属性：属性值\0;}
-moz-
Firefox浏览器识别，其他浏览器不识别
-webkit-
webkit内核浏览器识别，其他浏览器不识别
-o-
Opera浏览器识别，其他浏览器不识别
-ms-
ie浏览器识别，其他浏览器不识别
【4】常见的浏览器兼容问题以及解决方法
-
不同浏览器的标签默认的外补丁（margin）和内补丁（padding）不同
hack1：css里增加通配符*{margin：0；padding：0} -
IE6双边距问题；在IE6中设置了float，同时又设置margin，就会出现边距问题
hack：设置display：inline； -
当标签的高度设置小于10px，在IE6、IE7中会超出自己设置的高度
hack：超出高度的标签设置overflow：hidden，或者设置line-height的值小于你的设置高度 -
两个块级元素，父元素设置了overflow：auto；子元素设置了position：relative；且高度大于父元素，在IE6、IE7会被隐藏而不是溢出；
hack：父级元素设置position：relative -
图片有边框bug
描述:当图片加在ie上会出现边框
hack:给图片加border：0；或者border：0 none； -
css中的width和padding
在IE7和FF中width宽度不包括padding，在Ie6中包括padding. -
图片间隙
描述:div中的图片间隙bug
在div中插入图片时图片将div下方撑大大约三像素
hack1：将与写在一行上；
hack2：将转换为块级元素，给添加声明display：block； -
双倍浮向（双倍边距）（只有ie6出现）
描述: 当ie6及更低版本浏览器在解析浮动元素时会错误的把浮动边边距（margin）加倍显示。
hack：给浮动元素添加声明：display:inline; -
默认高度（ie6 ie7）
描述：在ie6及以下版本中，部分块元素拥有默认高度（在16px左右）
hack1：给元素添加声明：font-size：0；
hack2: 给元素添加声明：overflow：hidden； -
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;}
- 页面的最小宽度
IE不识别min，要实现最小宽度，可用下面的方法：
#container{ min-width: 600px;width:expression(document.body.clientWidth＜ 600? "600px": "auto" );}
第一个min-width是正常的；但第2行的width使用了Javascript，这只有IE才认得，这也会让你的HTML文档不太正规。它实际上通过Javascript的判断来实现最小宽度。
- DIV浮动IE文本产生3象素的bug
左边对象浮动，右边采用外补丁的左边距来定位，右边对象内的文本会离左边有3px的间距.
#box{ float:left; width:800px;}
#left{ float:left; width:50%;}
#right{ width:50%;}
*html #left{ margin-right:-3px; //这句是关键}
<div id="box">
<div id="left">＜/div>
<div id="right">＜/div>
</div>
-
高度不适应
高度不适应是当内层对象的高度发生变化时外层高度不能自动进行调节，特别是当内层对象使用margin 或padding时。
解决技巧：在P对象上下各加2个空的div对象CSS代码{height:0px;overflow:hidden;}或者为DIV加上border属性。 -
为什么web标准中IE无法设置滚动条颜色了
解决办法是将body换成htm
<!DOCTYPEhtml PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<meta http-equiv="Content-Type" content="text/html;charset=gb2312" />
<style type="text/css">
html {
scrollbar-face-color:#f6f6f6;
scrollbar-highlight-color:#fff;
scrollbar-shadow-color:#eeeeee;
scrollbar-3dlight-color:#eeeeee;
scrollbar-arrow-color:#000;
scrollbar-track-color:#fff;
scrollbar-darkshadow-color:#fff;
}
＜/style>
-
无法定义1px左右高度的容器
E6下这个问题是因为默认的行高造成的,解决的技巧也有很多：
例如:overflow:hidden zoom:0.08 line-height:1px -
超链接访问过后hover样式就不出现的问题
被点击访问过的超链接样式不在具有hover和active了,很多人应该都遇到过这个问题,解决技巧是改变CSS属性的排列顺序: L-V-H-A
<style type="text/css">
a:link {}
a:visited {}
a:hover {}
a:active {}
</style>
-
FORM标签
这个标签在IE中,将会自动margin一些边距,而在FF中margin则是0,因此,如果想显示一致,所以最好在css中指定margin和 padding,针对上面两个问题,我的css中一般首先都使用这样的样式ul,form{margin:0;padding:0;}。 -
表单元素行高对齐不一致
描述：表单元素行高对齐方式不一致
hack：给表单元素添加声明：float：left； -
按钮元素默认大小不一
描述：各浏览器中按钮大小不一致
hack1：统一大小/（用a标记模拟）
hack2:input外边套一个标签，在这个标签里写按钮的样式，把input的边框去掉
hack3:如果这个按钮是一个图片，直接把图片作为按钮的背景图即可。 -
百分比bug
描述：在ie6以及以下版本中解析百分比时会四舍五入方式计算从而导致50%加50%大于100%的情况。（也会受系统影响）
hack：给右边的浮动元素添加声明 -
ul和ol列表缩进问题
消除ul、ol等列表的缩进时，样式应写成：list-style:none;margin:0px;padding:0px;
经验证，在IE中，设置margin:0px可以去除列表的上下左右缩进、空白以及列表编号或圆点，设置padding对样式没有影响；在 Firefox 中，设置margin:0px仅仅可以去除上下的空白，设置padding:0px后仅仅可以去掉左右缩进，还必须设置list- style:none才能去除列表编号或圆点。也就是说，在IE中仅仅设置margin:0px即可达到最终效果，而在Firefox中必须同时设置margin:0px、 padding:0px以及list-style:none三项才能达到最终效果。 -
li列表的bug
（1）当父元素li有float：left；子元素a没设置浮动的情况下会出现垂直bug；
hack：给父元素li和子元素a都设置浮动
（2）当li中的a转成block；并且有height 并有float的li没设置浮动会出现阶梯显示
hack：同时给li加float
-
当前元素（父元素里面的第一个子元素）与父元素没有设置任何浮动的情况下，设置margin-top后 会错误的把margin-top加在父元素上
hack1：给父元素添加声明overflow：hidden；
hack1：:给父元素的子元素添加浮动
当两个上下排列的元素，上元素有margin-bottom下面元素有margin-top：他们的中间间距不会叠加而是设置为较大值 -
鼠标指针bug
描述：cursor属性的hand属性值只有ie9以下的浏览器识别，其他浏览器不识别该声明cursor属性。
pointer属性值ie6以上版本及其他内核浏览器都识别该声明
hack：如统一某元素鼠标指针形状为手型，应添加声明cursor：pointer； -
透明属性
兼容其它浏览器写法：opacity：value；（value取值0-1）
ie浏览器写法：filter：alpha（opacity=value）；取值1-100（整数） -
Html对象获取问题
FireFox：document.getElementById(“idName”);
ie：document.idname 或者 document.getElementById(“idName”).
解决办法：统一使用document.getElementById(“idName”); -
操作tr的html
在ie9以下，不能操作tr的innerHTML -
const问题
说明：Firefox下，可以使用const关键字来定义常量；IE下，只能使用var关键字来定义常量。
hack：统一使用var关键字来定义常量。 -
event.srcElement问题
问题说明：IE下，event对象有srcElement属性，但是没有target属性；Firefox下，event对象有target属性，但是没有srcElement属性。
hack：使用srcObj = event.srcElement?event.srcElement:event.target; -
事件绑定
E:dom.attachEvent();
其他浏览器：dom.addEventListener();
标准浏览器采用事件捕获的方式对应IE的事件冒泡机制（即标准由最外元素至最内元素或者IE由最内元素到最外元素）最后标准方亦觉得IE这方面的比较合理，所以便将事件冒泡纳入了标准，这也是addEventListener第三个参数的由来，而且事件冒泡作为了默认值。 -
event.x与event.y问题
描述: IE下event对象有x,y属性,但是没有pageX,pageY属性;
Firefox下event对象有pageX,pageY属性,但是没有x,y属性.
解决方法：使用mX(mX = event.x ? event.x : event.pageX;)来代替IE下的event.x或者Firefox下的event.pageX. -
window.location.href问题
描述:IE或者Firefox2.0.x下，可以使用window.location或window.location.href;
Firefox1.5.x下,只能使用window.location。
解决方法：使用window.location来代替window.location.href。 -
frame问题
以下面的frame为例：
<frame src="xxx.html" id="frameId" name="frameName" />
(1)访问frame对象:
IE:使用window.frameId或者window.frameName来访问这个frame对象, frameId和frameName可以同名。
Firefox:只能使用window.frameName来访问这个frame对象.
另外，在IE和Firefox中都可以使用window.document.getElementById(“frameId”)来访问这个frame对象.
(2)切换frame内容:
在 IE和Firefox中都可以使用window.document.getElementById(“testFrame”).src = "xxx.html"或window.frameName.location = "xxx.html"来切换frame的内容.
如果需要将frame中的参数传回父窗口(注意不是opener,而是parent frame)，可以在frame中使用parent来访问父窗口。例如：parent.document.form1.filename.value=“Aqing”;
-
模态和非模态窗口问题
说明:IE下,可以通过showModalDialog和showModelessDialog打开模态和非模态窗口;Firefox下则不能.
解决方法：直接使用window.open(pageURL,name,parameters)方式打开新窗口。
如果需要将子窗口中的参数传递回父窗口,可以在子窗口中使用window.opener来访问父窗口.
例如：
var parWin = window.opener;
parWin.document.getElementById(“Aqing”).value = “Aqing”; -
ajax略有不同
IE：ActiveXObject
其他：xmlHttpReuest
看了几篇技术博客总结的，有错误或则欠缺的欢迎指出
扫一扫
308
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
