淺談瀏覽器安全色性問題-（3）他山之石整理

#淺談瀏覽器安全色性問題-（3）他山之石整理##前言我們除了在自己的實際項目中總結遇到的相容性問題，還要通過網路及其他途徑收集，以拓寬自己的視野思路。網路上的方案可以分為兩類，一類針對某個點，解決一個常見的BUG；另外一類針對方法，解決特定版本下瀏覽器的問題##點###舉例* margin及padding在各瀏覽器下不一致的問題，解決方案一般是`*{margin:0;padding:0;}`，在aliceui中是```body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td,hr,button,article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section {    margin:0;padding:0;}```這個問題其實很常見，如果是從切片等基礎開始做起，並且對位置定位敏感度高的人一般都會發現。當然第一個解決方案其實在很多項目或者架構的CSS首先會包含，所以較容易會忘記。* 手勢滑鼠cursor及pointer的問題，統一用pointer* DOCTYPE 統一都加上，推薦用HTML5的DocType* document.all等非標準方法，都用w3c統一的getElementById等方法* 事件問題，另外寫一個判斷的函數，另外參數注意 window.event || e* IE6的fixed 代碼較多，[戳我](http://www.cnblogs.com/duanhuajian/archive/2012/09/23/2699119.html)* 其他，很多。[戳我](http://www.douban.com/note/163291324/) [戳我](http://www.cnblogs.com/ilexcai/archive/2011/08/20/2147173.html) [戳我](http://www.baidu.com/link?url=UszW0Uoit0tAWTvxyg-krto7aZ2yiBUfjN5d8j3GuePZCWUzq6o5U4sDvS1wkKjKL0-bzJdprf7oJb-MVO-09K)###點的集合現成的相容性解決方案，如[alice](http://aliceui.org/)，針對bootstrap的[bsie](http://www.bootcss.com/p/bsie/)等##方法###css hack即針對不同瀏覽器的識別特點，對CSS屬性加上特別的符號以讓不同瀏覽器表現有所區別。代碼：```.myDiv{    background: #000;  /* IE9+/chrome/FF  黑色 */    background: #ff0000\0; /* IE8 紅色 */    +background: #00ff00; /* IE7 藍色 */    _background: #0000ff; /* IE6 綠色 */}```個人意見，其實之前也有提及，html/css應該以w3c標準為基準去設計開發，這種網頁在IE9+/chrome/FF下基本一致，一般IE678才需要特別配置。其他的css hack還有很多，不舉例了，[戳我](http://www.cnblogs.com/WuQiang/archive/2011/08/23/2150240.html)即可###首碼各瀏覽器在推出自己特有屬性但未被收錄到w3c標準時，會用自己的特有首碼去區分，常見首碼如下|首碼|適用瀏覽器||-------|--------||`-ms-`|微軟IE系列||`-moz-`|Mozilla FireFox||`-o-`,`-xv-`|Opera系列||`-webkit-`|webkit核心如Safari、Safari on iOS、Chrome、Android瀏覽器|更多用法[戳我](http://book.51cto.com/art/201203/323008.htm)###條件注釋IE特有的東西，能針對不同的瀏覽器顯示特定的**(X)HTML結構**，針對結構是本方法最大的特點，如果要實現針對不同瀏覽器顯示不同的HTML結構，例如IE6就顯示升級提示，用此方法處理最好。支援`gt（大於）`，`lt（小於）`，`gte（大於等於）`，`lte（小於等於）`，`!（非操作）`及精確到小數點後四位的版本號碼區分。具體使用方法[戳我](http://baike.baidu.com/link?url=e_gfkfZkbcGf4bsbv0deUt896ugUxuBMtGROUlzBUUO-DijglbTdrarYhcCTAuhbUpWdGmPom7lI7ayqicprWq) ，[戳我](http://www.cnblogs.com/dtdxrk/archive/2012/03/06/2381868.html)###User-Agent這個更加多是用於javascript裡面判斷，其實本人不推薦使用，此處僅為了羅列。###態度嗯，我們有各種的方法去針對瀏覽器版本寫不同的相容性方案，但我們應該儘可能少用以上技巧，再重申一次吧*html/css應該以w3c標準為基準去設計開發*，確實是瀏覽器的BUG才用到處理BUG的方法。另外，針對javascript的區別推薦用[鴨式辨型](http://scriptfans.iteye.com/blog/318821) ([Duck typing](http://en.wikipedia.org/wiki/Duck_typing))的原則去判斷。（其實CSS HTML也 有，不過js會更加常見）*會飛，像鴨子一樣走路並且嘎嘎叫的，就當作是鴨子了*，此方法不僅能處理各種外殼瀏覽器，也能適應未來的瀏覽器。##參考http://www.cnblogs.com/WuQiang/archive/2011/08/23/2150240.htmlhttp://baike.baidu.com/link?url=e_gfkfZkbcGf4bsbv0deUt896ugUxuBMtGROUlzBUUO-DijglbTdrarYhcCTAuhbUpWdGmPom7lI7ayqicprWqhttp://www.cnblogs.com/dtdxrk/archive/2012/03/06/2381868.htmlhttp://en.wikipedia.org/wiki/Duck_typing