首先要做的是挑選乙個好的瀏覽器。我的選擇是chrome,因為它擁有強大的除錯工具。當我在chrome上完成除錯後,我會接著在safari或者firefox上除錯。
如果在這些「好的」瀏覽器上沒有達到期望的效果,很有可能是**本身違背了css規則。不要試圖使用hack方法來解決在這些「好的」瀏覽器上出現的問題,而是應該找出問題的原因。通常我會檢查以下可能的bug出處:
html**解釋 - 你是否忘記閉合乙個標籤? 你是否用乙個inline元素包住乙個block元素? 違背標準的**可能在不同的瀏覽器上被解釋呈現成不同的效果。
使用css lint工具檢查css**。留意那些檢查出來的errors。多數情況下,errors比warnings更容易引發跨瀏覽器差異。
忘記使用reset樣式表,而是依靠於(不同的)瀏覽器預設的css樣式。
瀏覽器支援性的差異。你是否使用了高階css3屬性或者html5元素?檢視瀏覽器支援性文件從而確保所有你的受眾的瀏覽器都被涵蓋。你需要設計「功能降級」來支援老式的瀏覽器。比如,把陰影邊框降級成邊框,或者把圓角降級成方塊。
在不該有空格的地方加上了空格,margin可能因此呈現得詭異。
使用了絕對定位,可是沒有設定垂直和水平偏移。這種情況下,絕對定位的元素將被呈現在跟position:static一樣的位置上。但是,如果你嘗試更改它的top,right,bottom或者left值,這個元素將馬上「跳」到參照於它最近的相對定位的父元素的位置。
按照「不尋常」的方式組合了不同display方式的元素。比如,w3c標準並沒有說當乙個table-cell緊鄰乙個浮動元素時應該是怎樣的layout。因此,這樣寫的**並不是錯誤的,但可能會導致跨瀏覽器呈現不同效果的bug。
空格是否影響了layout。你應該不想讓排版樣式依賴於空格。
小數點畫素值會導致跨瀏覽器的不同效果。
接下來正文來了
最重要的需要記住的就是,w3c標準並沒有定義錯誤的行為。因此,如果你沒有按照規範寫,那麼可能會導致跨瀏覽器不同效果;如果你組合「奇怪的」屬性(例如margin和inline element),那麼也可能會導致跨瀏覽器不同效果bug。
display
我認為書寫css就像在選擇一段旅程。你需要作出一些決定.比如你要首先選擇使用不同display方式的元素:block,inline,inline-block和table。當你選擇好以後,你可以使用一些具體的方法來改變其實際的顯示。
塊元素應該使用margin,padding,height和width。然而line-height不適用。
行內元素應該使用line-height,vertical align和空格符。然而margin,padding,height和width不適用。
首先,**有垂直和水平排列方式。其次,如果你遺漏了**中的某元素,整個**可能會有詭異的顯示。最後,margin不適用與**的行和列,padding不適用與**和**的行。
positioning
如果你選擇使用塊級元素,接下來你需要選擇position方式:
float - 如果你使用了float,那麼這個元素就變成了塊級元素,而之前作用於該元素的vertical-align和line-height屬性都將失效。
absolute - 相對於最近的相對定位的父節點來計算偏移量。當父節點和兄弟節點改變時,絕對定位的元素並不會導致reflow。這個特性有利於製作動畫效果。但是,如果使用了絕對定位和動態更改內容將可能會導致顯示問題,乙個典型的例子是絕對定位的圓角框。
static – 預設的position方式。
fixed - 元素位置相對於瀏覽器視窗。不常使用的方式。
relative – 通常對於該元素樣式不影響。只是其下屬的絕對定位的子節點將相對於該節點計算偏移。
在這裡我就不列舉所有的display和position組合了。總之,有兩件事情需要注意:
對於我選擇的display和position方式,其他的屬性(比如margin,line-height)是不是適合?
兄弟節點的position方式是不是契合?
比如,float,table-cell和行內元素組合在一起是否合適?瀏覽器將如何解釋渲染?在w3c標準裡有沒有定義?如果沒有,那麼可能就有出現跨瀏覽器bug的風險。當然,這樣的組合並不是不可以,但你要想清楚為什麼要這樣做,以及做好足夠的跨瀏覽器測試。
internet explorer
當你解決了在「好的」瀏覽器上出現的問題後,現在應開始著手ie平台。我的建議是從你希望支援的最老版本的ie開始,因為很多老版本ie上的問題在新版本中延續出現。
就算對於ie,你也應該嘗試找出問題而不是依賴於使用hack方法。盲目使用*和_的hack方法就像在乙個返回錯誤值的函式中加入修正量(如下),而不是找出其中的演算法性錯誤。
return result + 4;
當然,有時候在ie6和ie7裡面使用hack是必要的。對於ie8,通常只在需要相容css3的地方使用hack。通常情況下,在ie6/7裡需要使用hack的地方有:
haslayout問題,使用zoom:1
相對定位導致元素消失
3px浮動bug
被撐大的容器的浮動錯誤,可是經常被overflow:hidden碰巧的掩飾了。
還有一些不太常見的需要使用hack的情況,比如當兩個浮動元素中間有comment**時將會觸發重複內容bug。對於只在ie**現的css問題,我的建議是仔細描述你所看見的,並在google中搜尋相應的解決方法。在你找到bug原因前,不要盲目使用hack掩飾它。ie自帶的除錯工具很糟糕,所以可能你需要給元素增加背景色來方便你檢視頁面上真實的排版。
實現解決方案
當你找到bug的原因並且知道解決方法後,你同時也應該知道如何在修改**時不破壞已有的正常效果的**。下面是我的建議:
1. 依賴樣式級聯
2. 使用針對特定瀏覽器的字首
3. 使用針對ie6/7的*和_
4. 不要使用針對ie8的9
5. 知道什麼時候該放棄針對ie的hack
6. 不要對最新版本的firefox,chrome,safari使用任何hack
1. 依賴樣式級聯
首先,在任何可能的情況下都盡量依靠樣式級聯。瀏覽器總是採取他們能夠讀懂的最後宣告的樣式。所以,你應該從針對老版本瀏覽器的樣式開始書寫,這樣個瀏覽器就能讀懂和使用它能讀懂的最後的樣式。例如:
.foo
2. 使用針對特定瀏覽器的字首
使用針對特定瀏覽器的字首,尤其對於還未被廣泛採用的屬性適用。例如:
.foo
注意,這套**裡有兩個針對不同版本webkit的語法。字首**的順序同樣應該從針對老版本瀏覽器開始書寫(參照第一條)。
如果有乙個w3c標準定義的語法,你應該把它放在最後(例如上述**最後一行)。這樣隨著瀏覽器開始支援這些新特性的標準語法,你的**也能夠穩健表現。
3. 使用針對ie6/7的和_對於舊版本ie特有的bug,使用和_來彌補。比如:
.clearfix
所有的ie hack都針對於某版本和其之前的所有瀏覽器,比如:
_ 針對ie6和更早版本
* 針對ie7和更早版本
9 針對ie8和更早版本 (注意,ie9在某些css屬性上同樣對於這個hack敏感)
所以,hack**的順序同樣也應該從針對老版本瀏覽器開始書寫(參照第一條)。
4. 不要使用針對ie8的9
我從來不會使用9來解決ie8裡面出現的樣式bug。我只會在彌補瀏覽器支援性上使用9來做「降級」處理。比如我使用了box-shadow(在更先進的瀏覽器上正常),可是在ie8下很難看,因此我使用了9來增加了乙個新border。這種情況不能依靠樣式級聯(參照第一條)來處理,因為這是增加乙個新樣式,而不是修改乙個已有的樣式。
5. 知道什麼時候該放棄針對ie的hack
不要試追求在ie中得到一模一樣的效果。你是否願意浪費額外的http請求,繁雜的html/js/css**段為了實現在ie6-8中同樣看到圓角框效果?對於我個人來說,我的答案是「不會」。
你應該知道什麼時候放棄針對某功能的hack。例如,不要使用filter去模擬css3裡的漸變效果,那樣會導致效能問題和排版bug。最簡單的辦法是,壓根不要寄希望你的網頁在所有瀏覽器中都表現得一模一樣。對於ie 6-8的使用者,最好的辦法就是給他們乙個簡單化的使用者體驗(注意,是簡單化而不是殘缺)。
下述糟糕的**就是使用filter去模擬css3裡的gradient:
.foo
6. 不要對最新版本的firefox,chrome,safari使用任何hack
對於firefox,chrome,safari上的樣式bug,最好的辦法是仔細檢查,很有可能這是因為你的**違背了css的規則。
關於除錯CSS跨瀏覽器樣式bug的問題
首先要做的是挑選乙個好的瀏覽器。我的選擇是chrome,因為它擁有強大的除錯工具。當我在chrome上完成除錯後,我會接著在safari或者firefox上除錯。如果在這些 好的 瀏覽器上沒有達到期望的效果,很有可能是 本身違背了css規則。不要試圖使用hack方法來解決在這些 好的 瀏覽器上出現的...
css樣式判斷瀏覽器
b 區別ie6 ie7 ie8 firefox b tip 為ie系列瀏覽器可讀 9 而ie6和ie7可讀 公尺字型大小 另外ie6可辨識 底線 因此可以依照順序寫下來,就會讓瀏覽器正確的讀取到自己看得懂得css語法,所以就可以有效區分ie各版本和非ie瀏覽器 像是firefox opera goo...
cocos creator 解決瀏覽器除錯跨域問題
尋找出來的解決方案是通過關閉chrome瀏覽器的安全策略 首先需要把chrome瀏覽器全部關掉!新建乙個chrome的快捷方式,在目標行後加入 args disable web security user data dir 請把雙引號內的內容完全複製,包括空格,每個 符號的前面必須留乙個空格。如上述...