2011-05-19 50 views
-1

我是新來的網頁設計,我的網站有一些問題。首先,它不是一個跨瀏覽器兼容的網站。我想這樣做,但我不知道如何做到這一點。我已閱讀了一些關於此的文章,但他們沒有得到任何幫助。請告訴我如何設計一個跨瀏覽器的網站。屬性border-radius在CSS級別2.1中不存在,但存在於:6px 6px

第二,我已經驗證了我的網站的CSS文件,並得到這些錯誤:

218 .box的財產邊界半徑不CSS水平2.1存在,但在存在:6像素6像素 219 .box的屬性-moz -border-radius不存在:6px 6px 220 .box屬性-webkit-border-radius不存在:6px 6px。

但我不知道如何解決這個問題。

http://www.harvestcreativemedia.com

回答

0

要解決一個網站的網站跨瀏覽器的最好方式是通過發展步伐與此啓動它在思想和步驟來檢查任何區別每個瀏覽器,並試圖找到一個跨瀏覽器的解決方案。你也可以通過一個完成的網站來實現它,但當然要困難得多。如果你有特定的問題,你可以在任何編程問題上使用stackoverflow.com獲得幫助。

關於您得到的錯誤是因爲您嘗試使用css 2.1標準來驗證css 3文件。去http://jigsaw.w3.org/css-validator/#validate_by_uri+with_options並選擇配置文件級別3 css來驗證css 3.

3

border-radius是一個CSS3屬性,所以如果您驗證爲CSS2,它會報告錯誤。

-moz-border-radius-webkit-border-radius是相同屬性的「供應商前綴」版本。供應商前綴由瀏覽器製造商提供給他們已經實現的功能,但是它們要麼尚未標準化,要麼其實施尚未完成。無論哪種方式,它允許網站設計人員在正式準備好之前使用該功能。

如果您正在設計跨瀏覽器網站,則需要考慮包含哪些瀏覽器。例如,你是否想花時間在非常舊版本的瀏覽器中工作(這可能沒有人使用)?您需要決定支持哪些舊版本。

這與border-radius相關,因爲當前版本的Firefox,Chrome和Safari全部支持border-radius而沒有供應商前綴。事實上,供應商前綴在幾個版本中並不需要,尤其是Webkit瀏覽器。所以你可能完全有理由放棄那些前綴聲明。您需要檢查哪些瀏覽器需要它們的版本,並決定是否要支持這些瀏覽器。

另一個需要考慮的因素是,直到最近,IE依然不支持border-radius,甚至沒有提供廠商前綴。 IE9支持它,但大多數IE用戶仍在運行IE8。

如果你想border-radius爲IE工作,你將需要做一些黑客攻擊。目前最好的選擇是CSS3Pie。你的另一個選擇就是忽略它,讓IE用戶保留方角。由於這不會影響您網站的可用性,因此您可以決定這是最簡單的選擇。

所有瀏覽器和瀏覽器版本都有它們自己支持的功能組合。像CanIUse.com這樣的站點對於幫助您確定是否使用任何特定功能是非常有用的:它顯示哪些瀏覽器和版本支持它,從而讓您對是否使用它做出明智的決定。

最後,我可以給你建立一個網站跨瀏覽器的最重要的建議:在所有瀏覽器中測試它,並且你想支持的所有瀏覽器版本。 (不要假設,如果它在一個瀏覽器版本中工作,它可以在其他版本中工作 - 你需要全部測試它們)。

+0

感謝您的幫助。我曾嘗試將此代碼用於我的視頻框。 15 \t #showreel \t 100%不是箱子尺寸值:100%100%100%100%100% #showreel \t屬性-moz-box-sizing不存在:100%100%100%100%100% #showreel \t物業-webkit-box-sizing不存在:100%100%100%100%100%#showreel \t 100%不是箱子尺寸值:100%100%100%100%100%那是行不通的。你能否給我一些建議,因爲我在不同的瀏覽器上查看了我的網站,這在Safari瀏覽器上只有很好,但其他瀏覽器正在改變視頻盒的佈局。 – 2011-05-20 13:27:03

0

一個好的事情,看看是jquery圓角。它非常簡單,幾乎做了css3 border-radius所做的所有事情。缺點是創建一個邊框,如果你想要一個1px的邊框,你必須將你的目標div包裹在另一個div中,並將外部設置爲1px的填充。

這裏是網站:http://plugins.jquery.com/project/corners 下載zip包來觀看演示。

這適用於所有瀏覽器和IE6 +,它也適用於正確的CSS屬性,如果它們存在的瀏覽器。

相關問題