如何寫出兼容大部分瀏覽器的CSS 代碼

本文轉載自查看原文 2012-08-27 06:25 13132 CSS/ html

前陣子一直在從事b/s 項目的開發，在css 方面有一些心得體會，特寫來與大家分享，歡迎大家評論，不過請勿人身攻擊啊，因為在前幾年我也寫過一篇文章：[原]兼容瀏覽器的布局CSS心得體會

樓下有很多人的評論：

就讓我繼續毀人吧。

1：使用Firefox 當主開發瀏覽器

為什么我推薦使用firefox 做為主開發瀏覽器,

首先目前市場上瀏覽器很多，ie6 + ,firefox ,opera,chrome,qq 瀏覽器，360瀏覽器，搜狗瀏覽器…

為什么我把qq 瀏覽器，360瀏覽器，搜狗瀏覽器這些也算進去,是因為這些瀏覽器雖然使用ie的內核，但是在某些地方顯示的效果不一樣。

有很多人在開發的時候選擇ie 做為瀏覽器，當然我認為如果使用ie 做為主開發瀏覽器的話，那應該是使用

ie8+ ，畢竟在ie8+ 的時候才出現了比較強大的工具，另外如果使用ie的話，那么你經常問自己的問題是“ie 下顯示正常，為什么firefox 下顯示不正常呢？”，這點后面會有解釋。

回歸正題：我推薦使用firefox 做為主開發瀏覽器的原因：

a：firefox 下面有開發神器firebug.

firebug 究竟有多厲害，相信使用過的人都知道的，另外firebug 還有yslow，等一系列測速插件，並且firebug啟動速度也比較快。

b：firefox 有很多開發插件，雖然firebug已經很出色了，但是這些插件在某些地方還是很有用的。

c：firefox 是遵守css 標准的瀏覽器，眾所周知ie 在這方面做的比較爛。

以前我曾經看過一篇文章，大致講的是

“ie 下顯示正常，為什么firefox 下顯示不正常呢？”，

其實我感覺應該這樣理解

“為什么firefox 下顯示不正常，但是在ie下顯示正常呢？”

因為當你這樣問自己后，你自己就會去查找，究竟是哪些元素ie沒有遵守css 標准呢。

d：firebug 雖然有控制台，但是有時候javascript 代碼console.write(“something”);,並不會正常的顯示到控制台上面去，

當你碰到console 失敗的時候，請嘗試下下面的步驟：

1：啟用firebug

2：禁用所有面板和清空激活列表。

3：重新啟用firebug。

2：使用reset.css

使用reset.css 可以省掉很多事情，比如ul ，li 他們在很多瀏覽器下面的margin ，padding 都不一樣，

通過使用reset.css 可以將大部分不一致的地方給屏蔽掉，沒有理由不使用reset.css啊。

下面是我隨便挑選的一個reset.css.

yui reset.cssbody,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td { 
	margin:0;
	padding:0;
}
table {
	border-collapse:collapse;
	border-spacing:0;
}
fieldset,img { 
	border:0;
}
address,caption,cite,code,dfn,em,strong,th,var {
	font-style:normal;
	font-weight:normal;
}
ol,ul {
	list-style:none;
}
caption,th {
	text-align:left;
}
h1,h2,h3,h4,h5,h6 {
	font-size:100%;
	font-weight:normal;
}
q:before,q:after {
	content:'';
}
abbr,acronym { border:0;
}

3：學習一些基本的CSS 知識

如果想寫好css 的話，那么一些基本的css知識是應該知道的，比如float,margin,padding,position..屬性，還有盒子模型，文檔流模型，在這里沒什么技巧，我只能推薦一些書籍了。

精通CSS：高級Web標准解決方案（第2版)

一些基本的書籍隨便看看，上面的這本書籍才是經典中的經典，個人認為學css不看這本書，看遍千本也枉然。

4：常見的bug

常見的一些bug你應該都知道的，事實上在我寫css的這段時間，我發現大部分bug 都基本上是這些bug，大部分顯示不正確的也是這些bug.

a：clearfix

在很多時候一刀切是非常管用的，尤其是對於那些非常喜歡用float的同學。

clearfix.clearfix:before, .clearfix:after {
    content:"";
    display:table;
}
.clearfix:after{
    clear:both;
    overflow:hidden;
}
.clearfix{
    *zoom:1;
}

b：double margin (雙倍邊距)

有時候你會發現兩個元素的margin 在不同的瀏覽器上顯示不一樣，如果你查看css 的時候發現你設置了float的話，那么很可能你碰到了double margin. 解決這個辦法的原因很簡單，比如設置margin 為0 (即不使用margin,我最早就是這種想法)，

最根本的是設置float 元素的display = “inline”.

由於float 元素本來display 就是inline .所以每當你要使用float 的時候，請記住將display 設為inline.

c：關於width ,height,line-height,border

border 是一個很好用的東西，在很多時候，僅僅給元素加個border就解決實際問題了，因為加了border的元素在ie 下面就有了hasLayout 屬性。

line-height 也是一個非常讓人頭痛的屬性，有時候你會發現無論你怎么設置height,height 好像不起作用似的，height不起作用有可能是display :line ,也有可能float，同樣也有可能是line-height。

有人說過只要是float 的對象就應該設置width,height,關於這點我認為在某些情況下設置width 是必要的，但是設置height 就不一定了。

d：bug 其實沒有那么多

有很多些css 的同學，當碰到一兩個比較棘手的問題的時候，就說這個是ie的bug，可是大部分情況下，是自己的寫法沒有符合標准，或者是沒有正確的理解css，所以他們經常做的就是，試試加個width，加個height。試試加個border，試試修改下margin,padding。當然很多時候運氣比較好，一下就加對了，但運氣不好的時候就比較郁悶了。解決了bug 是運氣，沒解決bug就是ie的bug，可是事實上ie 的bug 大部分都曾經出現過，所以在對待bug 的時候，還是要心平氣和的分析問題，解決問題。

5：應該記住的一些瀏覽器css寫法

如果你使用firefox 做為主開發瀏覽器的話，我相信你的頁面在opera,chrome 下應該也不會太亂，但是ie 我就不敢保證了，這個時候就應該調整ie 兼容性了。

有很多種方式，比如使用條件注釋針對各個ie 瀏覽器引入不同的css。

條件注釋<!--[if IE 5]>僅IE5.5可見<![endif]-->
<!--[if gt IE 5.5]>僅IE 5.5以上可見<![endif]-->
<!--[if lt IE 5.5]>僅IE 5.5以下可見<![endif]-->
<!--[if gte IE 5.5]>IE 5.5及以上可見<![endif]-->
<!--[if lte IE 5.5]>IE 5.5及以下可見<![endif]-->
<!--[if !IE 5.5]>非IE 5.5的IE可見<![endif]—>