2012-07-27 120 views
2

我寫使用HTML & CSS,PHP和MySQL我的第一個博客。CSS和不同的瀏覽器問題

在寫「style.css文件」的代碼,我在網上搜索任何有用的教程,並在每一個我讀:有有關Internet Explorer和Mac相同的音符,如:

/* IE5 Mac Hack \*/ 
/*/ 
#main-nav { padding-left: 11px; overflow: hidden; } 
/* End Hack */ 

所以我讀到的CSS IE瀏覽器問題的一些文章,發現大網站描述它喜歡:

http://www.webcredible.co.uk/user-friendly-resources/css/internet-explorer.shtml 

但是,即使看了那麼多的文章\的網站後,我還在一個初學者誰didnt完全明白,我怎麼能確保我的博客適用於每個瀏覽器(例如IE5 \ 6 \ 7,chrome \ f irefox \ mozilla \ opera ..等)?!

有,我必須覆蓋普通的瀏覽器\ CSS問題(照顧)?

在此先感謝。

+11

據瞭解,Mac 5的IE 5已經停用了大約十年。在這一點上忽略它是相當安全的。 – 2012-07-27 17:13:10

+1

確保它在每個瀏覽器中都能正常工作的最佳方法是在每個瀏覽器中進行測試。較舊的瀏覽器SUCK,可能不支持您嘗試使用的某些樣式。最好的辦法就是寫出你希望顯示的css文件並進行修改,以便在不符合標準的瀏覽器(例如IE)中獲得「最佳效果」 – Matt 2012-07-27 17:13:17

回答

4

短於人類已知的每一個瀏覽器編寫代碼,每個操作系統上是沒有辦法來愚弄你的證明CSS/HTML或其他客戶端腳本工作每一個瀏覽器完全一樣的,我不在乎你在Mac,Linux,Microsoft,Chrominum等。每個操作系統都有自己的怪癖,每個操作系統的每個瀏覽器和瀏覽器版本也有自己的特點但是就像別人指出的那樣,儘管你做了一些非常精緻的事情,但幾乎所有標準的CSS xx和HTML xx和JavaScript都適用於所有瀏覽器,新老版本都很好,你偶爾會遇到打嗝的問題,但是再也沒有辦法解決這個問題,在我作爲開發人員的時候,我認爲避免css「黑客行爲」是爲了彌補每個瀏覽器需要的地方,並且通過php/javascript使用瀏覽器檢測來彌補每一個瀏覽器的需求。提供該瀏覽器支持特定問題的替代版本。

也可以在您的網站上的某處知道您的開發支持哪些瀏覽器。如果你剛開始學習大多數文檔,你會發現後面的年代將會涉及到CSS3和CSS2 ..以及HTML5(這與4的一些增強功能幾乎相同)。因此,在這一天它幾乎容易說出學習,你很可能會輕鬆地支持IE 8+,Chrome 10+,Firefox 4+,Opera 8+ ......並且在你身邊最大的寶座將是仍然使用IE 7的人,或火狐3-13.5

至於常見的問題,這是一個艱難的。儘管我認爲最大的一個是位置樣式。當涉及到固定和絕對IE瀏覽器例如不喜歡固定位置或它是絕對的,它的一個或另一個。但通常情況下,任何處理從DOM流中分離元素的東西都是常見的東西。在一些較舊的瀏覽器中邊緣和填充處理方式也不同。總而言之,如果您擔心css/html和其他客戶端腳本的問題,並且支持儘可能多的瀏覽器,那麼您將最終產生一個非常單調的網站,並最終以癱瘓狀態進入避難所。選擇一組瀏覽器,支持這些瀏覽器,並節省一些頭痛。

+0

IE 6甚至沒有在這裏顯示,所以告訴我爲什麼我們應該爲它開發? http://www.w3counter.com/globalstats。php – BlackHatSamurai 2012-07-27 17:51:41

+0

我不認爲我暗示在任何地方這樣做,除非專門用於合作級別的企業,這隻會導致他們總是有較低級別的員工,仍然坐在老戴爾電腦上,無法將他們升級到更新或更新沒有關心,但期望員工仍然可以通過技術超越使用舊技術的能力。 – chris 2012-07-27 18:06:34

+0

你也可以查看這個鏈接http://www.w3schools.com/browsers/browsers_explorer.asp,它確實有6。 6不是廣泛使用,IE也不是一個整體,而是取決於你的製作方式,你的目標是誰,它總是很好的考慮他們可能會用到什麼,而不是你用什麼來開發,畢竟你的目標受衆使您的網站成功,而不是你.. – chris 2012-07-27 18:09:50

1

以我的經驗,要知道的唯一正確的方法是測試它自己。大多數情況下,你不應該遇到任何問題,通常當你做這些事情時,他們不是什麼大問題。我還了解到,將所有內容「黑客入侵」似乎是最簡單/最好的做法,但事實上,這只是可能已經調整過的糟糕的CSS。這就是說,有些時候你無法繞過它,那就是野獸的本質。對我來說,最大的麻煩來自於divs。隨着您成長爲一名開發人員,您將逐漸瞭解每一次無疑會發揮什麼作用,以及您必須反覆測試以確保正確。這只是一個實踐問題。這就是說,只要你保持你的設計清潔和簡單,它不應該太難。

3

你可以看到一個CSS broswer支持圖表here

這讓你知道哪些瀏覽器支持什麼。您可以製作多個css文件,並根據瀏覽器進行切換。

+0

謝謝Alien先生的更正。 – 2012-07-27 18:01:21

1

你可以用你的CSS實驗,並通過使用Adobe browserlab測試每個瀏覽器的差異。 我推薦嘗試你的CSS和你在網上找到的東西,然後測試與browserlab的兼容性。

從我的理解它從Adobe的補充服務,所以給它一個試試吧!

如果不工作,你也可以嘗試http://browsershots.org/,雖然我從來沒有使用過它,它應該做的工作你問。

2

當你在IE9中(我認爲也是10)時,在頁面上點擊F12,它將顯示控制檯(就像在Chrome中一樣)。該控制檯實際上有一個功能,您可以選擇查看一個頁面,因爲它將在IE 6,7,8或9中查看。它不是完美的,但它非常好。

至於您使用的實際屬性和選擇器,如果您是初學者,我建議您在使用它之前慢慢查找每個選擇器和屬性,然後運行快速搜索以查找任何兼容性問題/解決方法。你應該還記得的一件事是偶爾,儘管我們儘可能地儘量減少它,但有些東西不能在那個過時的瀏覽器(通常是IE瀏覽器)中渲染。這並不意味着你不應該在其他頁面中包含這些內容 - 在這些情況下查看如何製作針對瀏覽器的代碼和樣式 - 但同時,請確保你沒有製作兩個完全不同的頁面。

尤其是當你第一次出發時,儘可能地嘗試一切,並儘可能地玩。具有創造性,最重要的是,擁有它的樂趣!

P.S.我的第一個完整網站也是一個博客網站(PHP,MySQL,HTML,CSS)。 :)