2010-06-04 75 views
1

我們有一個需要在IE6,7,8中工作的項目。過載級聯樣式表

我對樣式表沒有經驗,但是我知道根據瀏覽器類型有多種方式來加載樣式表。

我的問題是,是否有可能擁有所有瀏覽器將使用的主樣式表,然後導入一個覆蓋各種樣式以考慮瀏覽器實現的額外的樣式表,還是我需要每個瀏覽器只有一個CSS當需要完成解決方法時,它將具有大部分相同的代碼。

也許我最近一直在做過多的OO,我已經習慣了我很好的繼承等

回答

2

沒有我知道的網站實際上爲每個瀏覽器手動保留不同版本的CSS文件。通常,它們只保留主樣式表和子樣式表,如第一種情況,但是使用腳本將它們合併到一個靜態文件中。維護每個瀏覽器的的所有 CSS樣式的不同副本是不值得的麻煩。

你列出的都是有效的,並且有自己的優勢的方法有兩種:

主樣式表與子樣式表對每個瀏覽:這種方法是簡單和正常工作。

  • 專業版:它不需要你有一個腳本來將瀏覽器特定的樣式表與主樣式表合併在顯示給用戶之前。
  • Con:需要加載更多的頁面,這可能會慢一些; CSS precedence問題可能難以調試,因爲CSS跨多個頁面

合併的主樣式表和瀏覽器特定的樣式傳播:這種方法非常適合(我的意思是)網站有很多請求:(例如雅虎,它有這個CSS文件,接受查詢字符串來合併CSS文件);優點和缺點基本上與上述相反。

我建議您只選擇第一個解決方案,除非您的網站非常大;用PHP和服務器端瀏覽器檢測,代碼可能是這樣的:

echo "<link rel='stylesheet' type='text/css' href='/css/main.css' />\n"; 
$browser = get_browser(null, true); 
$browser = $browser['browser']; 
if ($browser == 'Firefox') { 
    echo "<link rel='stylesheet' type='text/css' href='/css/firefox.css' />\n"; 
} elseif ($browser == 'Internet Explorer') { 
... 

請注意,這是最好的,如果你的設計不需要瀏覽器特定CSS的。大多數情況下,這不是必需的,並且是由對CSS屬性的錯誤理解造成的。要修復較小的默認瀏覽器差異,CSS庫(例如YUI reset)可能會非常有幫助。

1

我肯定會走的樣式表的級聯自然優勢。

我會包括一個base.css,然後如果你想,可以在每個瀏覽器的基礎上添加一個樣式表。

但是,我不會推薦它。一般來說,你可以讓IE6 + 7玩球而不需要不同的樣式表。

但是,如果您不能,請查看conditional comments