2009-08-07 225 views
1

我最近爲客戶設計了一個Web應用程序。我使用CSS來進行應用程序的佈局。我測試了IE7,Mozilla 3.0.1,Google Chrome 2.0.xxx,Safari 3.1和Opera 9.51的佈局。CSS瀏覽器兼容性問題

他們都正確顯示沒有問題。在交付應用程序後,我的客戶發現它與IE6存在兼容性問題。該網站未正確顯示。

我該如何解決這個問題?我的系統上沒有IE6甚至嘗試修復它。每次我嘗試將瀏覽器降級到IE6時,IE都將停止工作。有沒有一種方法可以讓我的環境可以在線模擬IE6。

其次,正在利用css框架來解決兼容性問題,即使我想使用一個css框架,哪一個更好,除了藍圖css。

感謝您的時間。

+0

這就是爲什麼我們在爲人們工作時簽訂合同 - 我希望爲了您的緣故,客戶爲IE6兼容性工作付出額外費用...... – ijw 2009-09-02 13:14:05

回答

5

我有一種感覺,你正在運行到一個盒子模型的問題,因爲你正在渲染怪癖模式。 IE7 +和所有其他瀏覽器使用W3C盒子型號,而IE6使用IE盒子型號以怪癖模式。

IE框模型(被稱爲傳統框模型),包括元素的寬度/高度的填充和邊框。

在IE框模型下,寬度爲100px,每邊2px填充,3px邊框和7px邊距的框將具有114px的可見寬度。

W3C盒子模型(這是標準盒子模型),從元素的寬度/高度中排除填充和邊框。

在W3C框模型下,寬度爲100px,每邊2px填充,3px邊框和每邊7px邊距的框將具有124px的可見寬度。

Box Models http://www.456bereastreet.com/i/box-model.gif


爲了使IE使用W3C盒模型(這是所有其他瀏覽器使用),需要在嚴格模式來呈現你的頁面。默認情況下,IE以怪癖模式呈現。

爲了在IE中觸發嚴格模式,您必須指定文檔類型。您可以使用以下任何文檔類型的:

HTML4嚴格:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
    "http://www.w3.org/TR/html4/strict.dtd" > 

XHTML 1.0嚴格:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 

XHTML 1。0過渡:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 

您的文檔類型必須首先出現在您的頁面上。它甚至在<html>標籤之前。 (添加一個<?xml>序言會導致IE返回怪癖模式,所以如果你有它,請將其刪除)。

約怪癖/嚴格的模式在這裏

的更多信息:

CSS - Quirks mode and strict mode


雖然加入DOCTYPE切換標準模式可能不會解決所有的問題,你至少需要巨大的一步在正確的方向。

+0

即使在標準模式下,IE6的佈局/ CSS/Javascript能力也是「有限」的,但這是IE6移植的第一步。 – ijw 2009-09-02 13:15:52

5

IE6是一種已知的處理CSS的災難。最好的辦法是使用虛擬機或舊系統,並在其上安裝IE6並用於測試。但是,有一些體面的工具可以模仿IE6。我最喜歡的是IETester。有一個在線工具browsershots.org也不錯,但我發現它有時並不一致。

您最好的方法是創建一個單獨的樣式表,僅用於IE6,並讓您的CSS的其餘部分處於工作狀態。您可以通過使用加載IE6只有樣式表在HTML <head>如下:

<!--[if IE 6]> 
    <link rel="stylesheet" type="text/css" href="IE-6-SPECIFIC.css" /> 
<![endif]--> 

一旦這樣裝,你就可以開始重寫那些具有IE6的問題你平時的風格。

+0

Zombat已經完美了。使用帶有IE6的虛擬化PC,並使用條件註釋來糾正*僅* IE6 - 其他人將其視爲普通註釋並忽略它。 我發現仿真ie6的程序做得不夠好,不能確保你做得對。 – Xanthir 2009-08-07 16:38:27

+0

IETester是我使用的。來這裏建議那件事。與任何模擬器一樣,可能有一些事情沒有用100%的準確性描繪,但我還沒有遇到問題。 – monkeypushbutton 2009-09-02 13:11:13

3

首先,它會爲您下載虛擬PC和IE兼容性測試VHD從這裏http://www.microsoft.com/Downloads/details.aspx?FamilyID=21eabb90-958f-4b64-b5f1-73d0a413c8ef&displaylang=en,我也用ztesat提到的IEtester,但更喜歡VPC圖像。

然後,您可以針對不同風格的IE測試您的應用程序。

爲了得到IE 6到工作的緣故,我常常求助於一個單獨的CSS表它,並把這個使用條件註釋http://msdn.microsoft.com/en-us/library/ms537512(VS.85).aspx

好運:)

1

IE 6有許多它的CSS框模型中的錯誤,導致正確編碼的網站在該瀏覽器下中斷。這是可能使用盒模型黑客和其他方法來解決這些問題,因此其獲得IE 6 Here is a list of common fixes for IE 6 box model problems

  1. 解決了IE 6問題的問題 - 我最喜愛的選擇是安裝的IE瀏覽器模擬器,讓你運行互聯網explorere的多個版本。 This one很不錯,雖然還有其他的。另一種常見的方法是創建一個運行IE 6或雙啓動的虛擬機(這既耗費時間又很痛苦,但確實可行)。我可以的話我更喜歡使用模擬器。
0

創建特定於修復IE6問題的樣式表,並用條件語句(只支持IE)調用它。下面是你應該在你的文檔的頭什麼的例子:

<!--[lte IE 7]> 
    <link rel="stylesheet" type="text/css" href="ie6.css" /> 
<![endif]--> 

您可能還需要考慮「重置」你的CSS,這有助於啓動瀏覽器關上公平的競爭環境(即獲得消除IE中不一致的邊距和填充)。我使用的那個可以找到here,而Yahoo!提供decent reset stylesheet作爲YUI 3

至於能夠調試自己的標記和風格在IE6中的一部分,這是兩個選項,我建議:Xenocode's Browser Sandbox虛擬化的瀏覽器(IE6,IE7,IE8,FF2,FF3, Chrome,Opera 9,Safari 3,Safari 4),而無需安裝實際的應用程序,而且這種操作非常麻煩,但讓我們在IE6,IE7和IE8中呈現標記,而無需安裝它們。

0

如果你有一個Win2K許可證,抓住VirtualBox,使用IE6安裝Win2K,並從那裏測試頁面。這就是我如何在不實際安裝IE6的情況下完成大部分測試。

如果不是你在做一個特定的客戶端的東西,但在大的網站,我建議使用代碼IE6 No More!

0

安裝IETeaster在不同版本的IE瀏覽器中進行測試。在這裏你可以找出問題出在哪裏

0

我猜,在W3C盒子模型下,一個寬度爲100px,每邊2px填充,3px邊框和7px邊距的盒子將有一個114px的可見寬度。不是因爲W3C排除了元素寬度/高度的填充和邊框。