數位行銷

【CSS】IE6的double margin顯示問題

我們經常會發現有些部落格在IE6中顯示不正常,其原因可能是double margin。

一般我們在做網頁LAY OUT時會將DIV做以下分布,這用在最IE7之後的瀏覽器都是沒問題的。

但是margins單獨使用在Float語法裡,在IE6的顯示裡可能會出現以下狀況:

為什麼要關懷IE6?

請參考以下資料,IE6在2010市佔的瀏覽器使用率有4.8%,在2009年12月市佔率為10.9%,這就是我們要關懷那些IE6使用者的原因。
網頁:http://www.w3schools.com/browsers/browsers_stats.asp

解決方式如下:

1.) Display Inline

有些網頁設計師建議在css的float區塊裡使用[ display:"inline;" ]這個語法,參考檔案:
http://10steps.sg/wp-content/uploads/article109/solution1.zip

 

2.) IF Statement

在IE6中會發生問題的不是只有double margin,你可以為IE6創建一個獨立的CSS,並使用以下語法在HTML裡:

參考檔案:
http://10steps.sg/wp-content/uploads/article109/solution2.zip

3.) Padding Property

有些顯示問題可以使用PADDING來解決,參考檔案:
http://10steps.sg/wp-content/uploads/article109/solution3.zip

最後請下載以下軟體IETESTER,即使在沒有IE6的測試環境裡也可以看到網頁在IE6的顯示方式,下載網頁:
http://www.my-debugbar.com/wiki/IETester/HomePage


最新文章

原創、翻譯及轉貼的資訊都在這裡。

網站是實現夢想的工具! 開始準備建置您的網站了嗎? 加Line好友
益盛科技

我們重視設計質感與行銷價值

。網頁設計。程式設計。Joomla教學。

 

聯絡資訊

ring@des13.com

點此加我們LINE  @igodos 加line好友

406台中市北屯區文心路四段955號11樓之2(需預約諮詢)

04-37072202 /  0919-413187 

thedes13 

 
OMO電商 社群整合,輕鬆提升5倍轉換率,追蹤客戶行為,自動化行銷!想了解,快與我們聯絡! ×
點此加我們LINE 連結line帳號
Our website is protected by DMC Firewall!