标签：box 浏览器 Browse 支持 color 兼容性问题 document IE

1. 由于不同浏览器对各个标签的基础属性默认值不相同，如Padding，Margin等。所以一般会使用一个Normalize.css这个2kb的基础包来统一，这个包并不是简单粗暴的让所有样式一样，而是尽可能一样，兼顾浏览器的一些基础设置，让各个浏览器尽量表现的一致。

2. cursor：hand，这个属性Safari不支持，所以可以采用大家都支持的pointer指针。

3.  一些IE下不支持的对象，需要用浏览器标识符区分后，分别用支持的对象，比如xmlHttpRequest再IE下不支持就需要用ActiveObject，比如document.body.scrollTop再ie下不支持，就需要用document.docuentElement.scrollWidth/clientWidth;

if(document.body.scrollTop){

// some codes;

}else{

 document.documentElement.scrollWidth

}

4. Opacity 在IE9以下也是不支持，需要用折中方案 filter：alpha（opacity：50）

5. !Important 在IE7以下也不支持

6. box-sizing不同浏览器的默认值不一样，会导致计算元素宽度也不一样。所以最好一开始统一起来，比如

　　box-sizing:content-box;  这个是W3C组织标准， border-box,是IE浏览器标准，即对元素指定宽度和高度包括了 padding 和 border 。

7.多个img一起横向放置，会有间隔，使用float属性。float多个又有间隔的话，必须设置为display：inline。

8. 高度小于10px，让line-weight 小于10；字体小于10px，tranform (0.8).

9. 对与浏览器提前支持的部分css3特性，需要用对应的前缀头，后者使用compass等框架做转换。

　　如-webkit-  Webkit, -ms: Trident; -moz: Geko; -o: Presto.

10. 多用框架去解决兼容性问题，比如Jquery，compass

11. css hack，比如IE6 _display, _*, IE7 *； IE8 value/9

12, a 标签伪类的定义顺序，需要时 LVHA

a:link {color: #FF0000}		/* 未访问的链接 */
a:visited {color: #00FF00}	/* 已访问的链接 */
a:hover {color: #FF00FF}	/* 鼠标移动到链接上 */
a:active {color: #0000FF}	/* 选定的链接 */

标签：box,浏览器,Browse,支持,color,兼容性问题,document,IE
来源： https://www.cnblogs.com/roy1/p/13715550.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。