1.浏览器和内核
目前有很多浏览器,而且浏览器的内核也不相同,因此浏览器对网页的解析就有一定出入,这就导致了浏览器的兼容问题。
使用Trident内核的浏览器:IE、Maxthon、TT;
使用Gecko内核的浏览器:Netcape6及以上版本、FireFox;
使用Presto内核的浏览器:Opera7及以上版本;
使用Webkit内核的浏览器:Safari、Chrome。
2.浏览器兼容
浏览器兼容分为html,css,javascript兼容。
html兼容问题主要是新的html5增加了许多新的标签,但是低版本的浏览器不支持。
javascript兼容主要是各个浏览器对事件的支持有很大问题。
- 不同浏览器标签默认的margin和padding差异很大
解决方案
*{
margin:0;
padding:0;
}
对浏览器的默认内边距和外边距设置,防止不同浏览器出现不同的效果。
2.IE6的书安倍边距BUG,块属性标签float后,又有横向的margin情况下,在IE6显示margin比设置的大
问题:在IE6下如果某个标签使用了float属性,同时设置了其外补丁“margin:10px 0 0 10px”可以看出,上边距和左边距同样为10px,但第一个对象距左边有20px。
**出现条件:**block元素+浮动+margin。
在IE6中一行中的最后一块被放到了下面的一行。
解决方案:
在float标签样式控制中加入 display:inline,将其转化为行内属性。
为什么第二个对象和第一个对象之间就不存在双边距?
因为浮动都有其相应的对象,只有相对于其父对象浮动,才会出现这样的问题。第一个对象是相对于父对象的,而第二个对象是相对于第一个对象的。所以第二个对象在设置后不会出现问题。
3.设置较小高度标签(一般小于10px),在IE6,IE7,遨游中高度超过了自己设置的高度
出现这个问题的原因是IE8之前浏览器会给标签一个最小默认的行高的高度。即使你的标签是空的,这个标签的高度还是会达到默认的行高。
解决方案:
给超出高度的标签设置overflow:hidden,或者设置行高line-height小于你设置的高度。
4.行内属性标签,设置display:block后采用float布局,又有横行的margin情况(IE6里的间距超过设置的间距)
解决方案:
在display:block后面加入display:inline;display:table
行内属性的标签,为了设置宽高,设置显示为块元素,用float布局并有横向的margin后,在IE6下,具有了块属性浮动后的横向margin问题。不过因为它本身属于行内属性标签,所以加上display:inline的话,它的宽高就不可设了。这时还需要在后面加上display:table
5.图片有默认的间距(几个img标签放在一起的时候,有些浏览器会有默认的间距,设置了通配符也不起作用)
解决方案:
使用float属性为img布局
因为img标签是行内属性的标签,所以只要不超过容器宽度,img标签都会排在一行里。但是部分浏览器的img标签之间有个间距。去掉这个间距使用float是正道。
6.标签最低高度设置min-height不兼容
解决方案:
如果我们要设置一个标签的最小高度200px;需要进行的设置为:
{
min-height:200px;
height:auto !important;
height:200px;
overflow:visible;
}
当内容小于一个值(如300px)时,容器的高度为300px,当内容的高度大于这个值的时候,容易高度被撑高,而不是出现滚动条。
7 css盒子模型在IE6下解析问题
元素内容占据的空间是由 width 属性设置的,而内容周围的 padding 和 border 值是另外计算的。IE6 在怪异模式中使用自己的非标准模型。这些浏览器的 width 属性不是内容的宽度,而是内容、内边距和边框的宽度的总和。
解决方案:
不要给元素添加具有指定宽度的内边距,而是尝试将内边距或外边距添加到元素的父元素和子元素。
8.javascript兼容性问题
① 在标准的事件绑定中绑定事件的方法函数为 addEventListener,而IE使用的是attachEvent
② 标准浏览器采用事件捕获的方式对应IE的事件冒泡机制(即标准由最外元素至最内元素或者IE由最内元素到最外元素)最后标准方亦觉得IE这方面的比较合理,所以便将事件冒泡纳入了标准,这也是addEventListener第三个参数的由来,而且事件冒泡作为了默认值。
③ 事件处理中非常有用的event属性获得亦不相同,ie是window.event方式获得,获得目标元素ie为e.srcElement 标准浏览器为e.target
④ 然后在ie中是不能操作tr的innerHtml的
⑤ 然后ie日期函数处理与其它浏览器不大一致,比如: var year= new Date().getYear(); 在IE中会获得当前年,但是在firefox中则会获得当前年与1900的差值。
⑥ 获得DOM节点的方法有所差异,其获得子节点方法不一致。
IE:parentElement parentElement.children
Firefox:parentNode parentNode.childNodes
childNodes的下标的含义在IE和Firefox中不同,Firefox使用DOM规范,childNodes中会插入空白文本节点。一般可以通过node.getElementsByTagName()来回避这个问题。
当html中节点缺失时,IE和Firefox对parentNode的解释不同。例如:
<form> <table> <input/> </table> </form>
IE:input.parentNode的值为空节点
Firefox:input.parentNode的值为form
解决方法:Firefox中节点没有removeNode方法,必须使用如下方法 node.parentNode.removeChild(node)
因为我们开发过程中一般都会使用类库,若是不使用,都会自己积累形成一个类库,所以就js而言,兼容性问题基本解决了。
9.css的hack知识点
/*
CSS属性级Hack */
color:red;
/* 所有浏览器可识别*/
_color:red;
/* 仅IE6 识别 */
*color:red;
/* IE6、IE7 识别 */
+color:red;
/* IE6、IE7 识别 */
*+color:red;
/* IE6、IE7 识别 */
[color:red;
/* IE6、IE7 识别 */
color:red\9;
/* IE6、IE7、IE8、IE9 识别 */
color:red\0;
/* IE8、IE9 识别*/
color:red\9\0;
/* 仅IE9识别 */
color:red
\0; /* 仅IE9识别 */
color:red!important;
/* IE6 不识别!important 有危险*/
/*
CSS选择符级Hack */
*html
#demo { color:red;} /* 仅IE6 识别 */
*+html
#demo { color:red;} /* 仅IE7 识别 */
body:nth-of-type(1)
#demo { color:red;} /* IE9+、FF3.5+、Chrome、Safari、Opera 可以识别 */
head:first-child+body
#demo { color:red; } /* IE7+、FF、Chrome、Safari、Opera 可以识别 */
:root
#demo { color:red\9; } : /* 仅IE9识别 */
/*
IE条件注释Hack */
<!--[if
IE 6]>此处内容只有IE6.0可见<![endif]-->
<!--[if
IE 7]>此处内容只有IE7.0可见<![endif]-->
参考文章: