温故而知新是一种传统下来的好习惯，总结就是温故的一种沉淀的方式，所以，我就来总结一下这两天出现的的兼容性问题吧
1.前缀
第一种就是css中经常见的需要加前缀可以兼容各浏览器的样式，比如说transform,animation,gradient等等
2.盒子模型
盒子模型通包括content,padding,border,margin这几部分，但是在标准盒子模型和IE盒子模型中，在获取width的时候会有差别。
标准盒子模型：width = content
盒子模型：width = content + padding +border
在开头文档声明中使用标准盒子模型即可
<!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">
3.js获取属性问题
IE下,可以使用获取常规属性的方法来获取自定义属性, 也可以使用getAttribute()获取自定义属性; Firefox下,只能使用getAttribute()获取自定义属性. 解决方法:统一通过getAttribute()获取自定义属性.
4.获取鼠标位置
IE下,even对象有x,y属性,但是没有pageX,pageY属性; Firefox下,event对象有pageX,pageY属性,但是没有x,y属性. 解决方法：（条件注释）缺点是在IE浏览器下可能会增加额外的HTTP请求数。
5.Chrome中字体
Chrome 中文界面下默认会将小于 12px 的文本强制按照 12px 显示, 可通过加入 CSS 属性 -webkit-text-size-adjust: none; 解决.
6.超链接书写顺序
超链接访问过后hover样式就不出现了 被点击访问过的超链接样式不在具有hover和active了解决方法是改变CSS属性的排列顺序: L-V-H-A : a:link {} a:visited {} a:hover {} a:active {}
7.谷歌border
在谷歌浏览器中当聚焦时，会默认为添加border样式，如不是你想要的颜色或者不需要可以通过outline进行改写
8. 空白格符号
空白格符号在浏览器中大小显示的差异，在谷歌中显示的距离比较大一些，ie和火狐中稍微小一些，如果布局在中间的话，可能感觉不是那么明显，但是在最边上的话，会出现滚动条。
解决方法：如果是比较小的导航，可以用a，或者li标签进行固定大小，不使用
9.内联元素img布局问题
几个img标签放在一起的时候，有些浏览器会有默认的间距，加了问题一中提到的通配符也不起作用
解决方法：使用float属性为img布局
10. min-height
因为min-height本身就是一个不兼容的CSS属性，所以设置min-height时不能很好的被各个浏览器兼容
解决方法：如果我们要设置一个标签的最小高度200px，需要进行的设置为：{min-height:200px; height:auto !important; height:200px; overflow:visible;}
1525
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
