css遇到的那些坑——瀏覽器默認樣式設置

2017/2/13 8:24:19 閱讀：1757 發(fā)布者：1757

今天自己寫css樣式，其中用到了<ul>標簽，設置了一系列效果后運行，
發(fā)現(xiàn)位置與設置有出入。chrome上打開檢查項，發(fā)現(xiàn)<ul>
標簽的styles底部多了以下一段：

ul, menu, dir {

display: block;

list-style-type: disc;

-webkit-margin-before: 1em;

-webkit-margin-after: 1em;

-webkit-margin-start: 0px;

-webkit-margin-end: 0px;

-webkit-padding-start: 40px;

}

旁邊顯示來源是：user agent stylesheet

檢查了html及css后，發(fā)現(xiàn)并無特別設置，html頭中也做了標準設定。
百度了”user agent stylesheet“之后，
發(fā)現(xiàn)是瀏覽器針對不同html元素，會有相應的css默認設置。

解決的方法：

1、比較簡單的一種方法：在css文件開頭設置通配符樣式，比如*{margin:0px;
padding:0px;}，覆蓋掉瀏覽器的默認設置；

2、復雜一點的方法：了解通用的幾種瀏覽器的默認設置，再單獨寫一個css文件，
將需要修正的樣式都寫在里面，以后做項目時可以共用。

【微信掃一掃】