浏览器兼容问题总结

png24位的图片在iE6浏览器上出现背景，解决方案是做成PNG8.
浏览器默认的margin和padding不同。解决方案是加一个全局的*{margin:0;padding:0;}来统一
IE6双边距bug:块属性标签float后，又有横行的margin情况下，在ie6显示margin比设置的大。

浮动ie产生的双倍距离 #box{ float:left; width:10px; margin:0 0 0 10px;}

这种情况之下IE会产生20px的距离，解决方案是在float的标签样式控制中加入 display:inline;将其转化为行内属性。(这个符号只有ie6会识别)

.bb{
    background-color:red;/*所有识别*/
    background-color:#00deff\9; /*IE6、7、8识别*/
    +background-color:#a200ff;/*IE6、7识别*/
    _background-color:#1e0bd1;/*IE6识别*/
}

IE下,可以使用获取常规属性的方法来获取自定义属性,也可以使用getAttribute()获取自定义属性;Firefox下,只能使用getAttribute() 获取自定义属性。解决方法:统一通过getAttribute()获取自定义属性。
IE下,even对象有x,y属性,但是没有pageX,pageY属性;Firefox下,event对象有pageX,pageY属性,但是没有x,y属性。
Chrome 中文界面下默认会将小于 12px 的文本强制按照 12px 显示,可通过加入 CSS 属性 -webkit-text-size-adjust: none;
超链接访问过后hover样式就不出现了被点击访问过的超链接样式不在具有hover和active了解决方法是改变CSS属性的排列顺序:

LoVe HAte 原则 L-V-H-A : a:link {} a:visited {} a:hover {} a:active {}

样式初始化

因为浏览器的兼容问题，不同浏览器对有些标签的默认值是不同的，如果没对CSS初始化往往会出现浏览器之间的页面显示差异。
初始化样式会对SEO有一定的影响，但鱼和熊掌不可兼得，但力求影响最小的情况下初始化。

最简单的初始化方法： * {padding: 0; margin: 0;} （强烈不建议）

body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, pre, form, fieldset, legend, button, input, textarea, th, td { margin:0; padding:0; }
body, button, input, select, textarea { font:12px/1.5tahoma, arial, \5b8b\4f53; }
h1, h2, h3, h4, h5, h6{ font-size:100%; }
address, cite, dfn, em, var { font-style:normal; }
code, kbd, pre, samp { font-family:couriernew, courier, monospace; }
small{ font-size:12px; }
ul, ol { list-style:none; }
a { text-decoration:none; }
a:hover { text-decoration:underline; }
sup { vertical-align:text-top; }
sub{ vertical-align:text-bottom; }
legend { color:#000; }
fieldset, img { border:0; }
button, input, select, textarea { font-size:100%; }
table { border-collapse:collapse; border-spacing:0; }

CSS里的visibility属性有个collapse属性值是干嘛用的？在不同浏览器下以后什么区别？

对于普通元素visibility:collapse;会将元素完全隐藏,不占据页面布局空间,与display:none;表现相同. 如果目标元素为table,visibility:collapse;将table隐藏,但是会占据页面布局空间. 仅在Firefox下起作用,IE会显示元素,Chrome会将元素隐藏,但是占据空间.

让页面里的字体变清晰，变细用CSS怎么做？ -webkit-font-smoothing: antialiased;
display:inline-block 什么时候会显示间隙？移除空格、使用margin负值、使用font-size:0、letter-spacing、word-spacing
ul标签内外边距问题ul标签在IE6\IE7中，有个默认的外边距，但是在IE8以上及其他浏览器中有个默认的内边距。解决方法：统一设置ul的内外边距为0
IE6下图片的下方有空隙解决方法：给img设置display:block;
IE6下两个float之间会有个3px的bug 解决办法：给右边的元素也设置float:left;
IE6下没有min-width的概念，其默认的width就是min-width
IE6下在使用margin:0 auto;无法使其居中解决办法：为其父容器设置text-align:center;
被点击过后的超链接不再具有hover和active属性解决办法:按lvha的顺序书写css样式，

“:link”: a标签还未被访问的状态；
“:visited”: a标签已被访问过的状态；
“:hover”: 鼠标悬停在a标签上的状态；
“:active”: a标签被鼠标按着时的状态；

标准事件绑定 addEventListener/attachEvent、event.target/event.srcElement、XMLHttpRequest/ActiveXObject(‘Microsoft.XMLHTTP’)

获取dom的父子节点 parentNode/parentElement