瀏覽器預設樣式

有個網站總結了IE6/7/8/9，FF3.6.3，webkit（r7042），opera10.51的預設樣式，熟悉一下可以讓我們更好的明白一些書寫CSS過程中的差異。

網站地址：http://www.iecss.com/

熟悉這些之後可以明白

一、使用CSS reset的原因。

二、*{margin:0;padding:0;}一刀切的做法為什麼不提倡

三、網上廣泛流傳的CSSreset為什麼也有人不提倡

 

從對比圖可以看出，不部分標籤其實是沒有margin或者padding的。其中又有些標籤一般是很少用到的，就算用到了，一般也會特殊定製。

對於一般的應用，簡單的css reset（按需）就可以了。比如：

body,p,dl,dd,h1, h2, h3, h4, h5, h6,form{ margin: 0; }
ul,ol,input,fieldset{ margin: 0; padding: 0; }
ul,ol{list-style-type: none;}
img{ border: 0; }
option,em{ font-style:normal}
a{ text-decoration: none; color: #c9c9c9;}
a:hover{ text-decoration: underline; color: #31c8e1;}

另外，直接翻看webkit的預設樣式表，尋找input:focus就可以知道為什麼chrome的input框選中之後預設有一圈黃色邊框

要去掉直接重設就可以了。

input,textarea{ outline:none; }
textarea{ resize:none;}//這個是去掉textarea預設的大小拖動

至於查看瀏覽器的預設樣式，IE不清楚，

FF下網上有個方法是resource://gre/res/html.css，不過這個貌似只能在4.0之前的版本看，4.0之後的版本被打包到安裝目錄的omni.jar裡面，解壓之後才可以看。

webkit和opera的暫不知道···

 

http://meiert.com/en/blog/20070922/user-agent-style-sheets/