2012-11-26 50 views
0

我正在製作一個網站,當我在safari中預覽它時。事實證明,正如我想要的那樣。但是,當我用Firefox測試它。如何使一個文件與不同的瀏覽器兼容?

在我的網頁我有一個使用

填充左和上邊距在頁面上對齊的元素。當我在safari中預覽它時,它完美地工作。但是,當我在Firefox中打開文件。元素的Margin-top增加了幾個像素。

我如何編碼我的CSS文件,以便我可以有不同的瀏覽器相同的頁面。我曾嘗試在網絡上尋找解決方案,但迄今爲止他們都沒有幫助解決這個問題。

回覆將非常感謝。

回答

0

正如jsteinmann所說,請檢查使用http://validator.w3.org/以確保您的頁面驗證。這需要一些時間才能確定您是否是新手,但這是一個重要步驟。

如果您遇到了FireFox的問題,那麼您在IE中查找時可能會死亡。收藏鏈接! http://msdn.microsoft.com/en-us/library/ms537512(v=vs.85).aspx

你有很多東西需要學習和谷歌將幫助:https://www.google.com.au/search?q=introduction+to+cross+browser+testing&oq=introduction+to+cross+browser+testing&aqs=chrome.0.57.5763&sugexp=chrome,mod=12&sourceid=chrome&ie=UTF-8

今後,使用計算器與代碼示例的具體問題。你會發現你很快得到具體的答案。

此外,不要忘記勾選您認爲最有用的答案,並且還可以向某個級別投票。這就是爲什麼人們花時間回答你的問題。

享受未來的漫漫長路:)

+0

非常感謝,感謝答案。 – john3161

0

明確指定所有四個邊距和所有四個填充值。這將消除瀏覽器內置默認樣式表中的差異。

+0

似乎是一個好主意,謝謝 – john3161

0

可以有幾個原因,爲什麼你發現你的佈局不是跨瀏覽器兼容,所以它會需要大量的標記和CSS的信息作出任何決定如何幫助你編碼100 %W3C有效的網頁。

我會建議使用像blueprint或960這樣的css框架來進行佈局,這樣你的問題就少了。這是啓動和維護項目的好方法,並且學習如何選擇不使用框架來創建佈局。

此外,我建議您先測試您的所有項目在Chrome和Firefox中,然後Safari瀏覽器,這僅僅是因爲與Safari瀏覽器相比,使用這兩種瀏覽器的用戶數量較多。我也會說,如果它在Chrome中看起來不錯,它在safari和firefox中可能看起來不錯,但它總是值得測試。

+0

我真的很新的網頁編碼,是的,我應該與Firefox和Chrome首先測試它。但是我嘗試了一種代碼方式,在那裏我可以保持safari代碼的完整性。雖然我可以在Firefox中改變一些東西,但問題在於我可以做一些小改動(我可以爲容器添加背景顏色,並且不會在Safari中顯示)。這是暗示,它的工作原理,但我不能改變容器的位置,即使改變了Margin-top的價值,爲什麼? – john3161

+0

我們都在某個時候開始,歡迎來到社區。我不建議使用瀏覽器特定的代碼來解決您的問題,即使IE確實支持這一點,但您確實想避免這種情況。我真的建議檢查出一個CSS框架。它確實可以幫助您爲您的項目創建可重複使用且問題較少的可靠代碼模式。 – jsteinmann

+0

要檢查出來,非常感謝! – john3161