IE 8（可能更早）CSS Disaster

我犯了一個錯誤，使用safari/firefox和chrome的最新版本設計一個網站。我簡單地檢查了它在IE 10上看起來不錯，但沒有太多的回退。然後，我開始使用'更性感'的CSS技術，並忘記了IE瀏覽器。IE 8（可能更早）CSS Disaster

我沒有防守，這是一個愚蠢的錯誤。

該網站看起來可怕的早期版本的I.E.它在I.E8上進行了簡要測試。導航欄橫跨頁面，entypo字體不顯示，並且微調器全部混亂。多數民衆贊成在第一頁，我還沒有能夠查看其他人。

更糟糕的是我使用的是Mac，虛擬機的Windows我有它運行的是Windows 8，並沒有首先安裝Windows的舊版本，我不能安裝舊版本的IE。

這幾乎是一場災難。該網站位於kingpetroleum.co.uk和任何幫助非常感謝。

編輯： Fontface細節工作不

@font-face{font-family:'EntypoRegular'; 
src:url(data:font/woff;charset=utf-8;base64,d09GRg ...... ...... ..... etc); 
src:url(data:fnt/truetype)format(''truetype); //deliberately mispelt there to avoid pasting a ton of code 
url('entypo-webfont-webfont.svg#EntypoRegular') format('svg'); 
    font-weight:normal; 
    font-style:normal

來源

2013-08-29 null

某些截圖或鏈接到該網站將有助於查看問題的程度 – TotalWipeOut

您需要向我們提供更多信息，以便我們可以幫助您 – letiagoalves

這可能有助於查看各種IE中網站的非交互功能：http ：//netrenderer.com/ – yochannah

如果你已經設計出整個網站沒有考慮IE考慮有沒有簡單的辦法解決它。我會建議使用IE瀏覽器樣式表。

事情是這樣的：

<!--[if IE]> 
<link href='ie-style.css' rel='stylesheet' type='text/css'> 
<![endif]-->

然後restyle你的元素，使他們都是IE友好。這適用於所有IE瀏覽器（不包括IE10），但有些標籤只會在特定版本中使用此樣式表。

來源

2013-08-29 10:33:06

乾杯西蒙，我認爲這可能是唯一的方法。有很多頁面，但我是我的錯誤。 – null

「*這適用於所有IE瀏覽器*」 - IE10停止使用條件註釋，僅供參考。在這種情況下，很好地工作，因爲IE10呈現該網站罰款:) – xec

@xec - 歡呼爲更新。我剛剛嘗試過使用IE10的開發模式來查看IE8中的站點以測試下面提到的css3Pie，但它似乎沒有被調用。這可能是因爲這個嗎？不知道如果使用開發模式改變瀏覽器如何反應如果IE IE瀏覽器如果IE10忽略它們 – null

你有沒有考慮過使用像PIE.js這樣的JS腳本？

http://css3pie.com/documentation/pie-js/

來源

2013-08-29 10:34:57 TotalWipeOut

這也是一個很好的選擇，可以節省很多時間 –

我現在試圖讓它工作，但有一些困難。我已經將它添加到我的頭標中，並且在IE8的開發模式下使用IE10，但它似乎沒有被稱爲 – null

它不應該這麼難固定在你的頁面的問題。首先，使用modernizr（http://modernizr.com/），它具有HTML5顫抖，這將有助於新的語義標籤，而且這在目前的任何網頁中都是必不可少的。此外，使用規範化（http://necolas.github.io/normalize.css/），它將有助於跨瀏覽器兼容性。

如果您使用的是大屏幕媒體查詢（移動第一種方法），你將不得不使用Respond.js或者只是添加條件樣式的IE（如在以前的答案引用）。

對於梯度，只是提供了一個PNG作爲背景，或與不支持的瀏覽器（優雅降級）固體背景住。

這同樣適用於邊界半徑。

的3D旋轉木馬不應該依賴於CSS3，除非它被認爲是一個額外的事情瀏覽器支持它（逐步增強）。如果它很重要，請使用jQuery。

字體圖標應該在IE8 +工作，也許有你的代碼有問題，或字體格式是缺乏。你應該使用icomoon.io（你可以導入一個svg字體）。

具有良好代碼，堅持好做法（使用優雅降級和/或漸進增強），你不應該有任何IE8大問題。請記住，您的網頁不會（也不應該）在所有瀏覽器中呈現相同效果，但不能失去其本質。

來源

2013-08-29 12:10:53

感謝您抽出時間回答問題並提供建議。我現在正在研究現代化裝置，並將您提到的標準化。漸變/邊框半徑和旋轉木馬可以保持原樣。我會收到一條消息，建議用戶更新瀏覽器以獲得最佳體驗或類似的內容。字體對我來說比較棘手，我記得前一陣子有問題。我在問題中粘貼了代碼，你介意看看嗎？再次感謝 – null

您未使用eot格式。 IE8只使用eot，所以你應該使用它。如果你對代碼沒有信心，最好的方法就是使用icomoon。它會給你一些工作來重做一切，但它在大多數瀏覽器中運行得非常好，並且做得很好。 –

忘了提及，這是一個很好的短文章： http://tatiyants.com/how-to-get-ie8-to-support-html5-tags-and-web-fonts/（忽略標籤的東西，只要堅持modernizr）。 –

IE 8（可能更早）CSS Disaster

回答

相關問題