2011-03-27 56 views
17

我繼承了前端使用新的HTML5標記(標題,導航,節標記)和新的CSS3樣式屬性(圓形邊框)的Web應用程序。該網站在Google Chrome和Safari中看起來很棒。用於IE7和IE8的HTML5和CSS3

但是,客戶現在抱怨IE7和IE8的網站壞了。一切都不一致,大多數樣式不渲染。

什麼是最簡單的方式使本網站在IE7和IE8的工作?我必須: a)應用一些破解讓IE瀏覽器接受新的HTML5和CSS3功能? b)完全重寫前端?

回答

27

Try this lovely script (.js) :)
而對於圓角我使用an other script (.htc)

使用1:

<!--[if lt IE 9]> 
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> 
<![endif]--> 

使用像第二:

-moz-border-radius: 4px; 
-webkit-border-radius: 4px; 
-khtml-border-radius: 4px; 
border-radius: 4px; 
behavior: url(border-radius.htc); 

快樂sitebuilding :)

原始鏈接不再有效,HTML5shiv已移動。

現在可以在GitHub上

https://github.com/aFarkas/html5shiv

+2

現在這些是一個很好的答案! +1推薦html5shiv – DarkThrone 2011-03-27 13:40:16

5

對於HTML5,我建議使用Remy Sharp's HTML5 Shim,但要看到效果,您的I​​E用戶需要啓用JavaScript。基本上,它利用了IE6/7/8中的一個錯誤,它允許HTML5元素在使用document.createElement函數首次在JavaScript中創建後被識別。

對於你的CSS,有幾個不同的黑客,如CSS3 PIE使用「行爲」屬性(這是唯一的IE)來模擬CSS3效果。雖然我親自避免了這些,但根據我的經驗,他們很容易中斷,最終變得比他們值得的更麻煩。相反,我傾向於編寫我的CSS,以便在IE中優雅地降級,這樣圓形的按鈕看上去很平滑,但仍然看起來不錯。

1

要添加到Karl和Alistair,我在我的網站中遇到了CSS3Pie的問題。我在四個月前使用了他們的CSS代碼,並且CSS3漸變阻止了在IE7或IE8中顯示的<input type="text"/>字段。只有當我重新訪問他們的網站,並看到他們的新CSS代碼才起作用。

課總是檢查最近的代碼

2

Modernizr的http://modernizr.com/插件的網站將是一個不錯的選擇。

+0

我在網站上安裝了modernizr,但似乎沒有什麼區別,樣式在IE8中完全損壞。 – MJCoder 2013-11-22 16:52:39

1

無論新的語義標籤,如果你打算在IE7/8中產生CSS3效果,你當然可以使用asp.Net圖形類作爲IE7/8的後備。一些可以使用.net圖形創建的效果是 -

邊框半徑,線性漸變,徑向漸變,箱形陰影..

您可以使用圖形類在asp.net頁面中創建這些效果,並將該頁面呈現爲任何HTML元素的背景圖像。即

<div style="background:url(http://127.0.0.1/index/yourpagename.asp?param1=value1&param2=value2)"></div> 

OR

<img src="http://127.0.0.1/index/yourpagename.asp?param1=value1&param2=value2" /> 

其中參數值是在創建效果所需輸出方面的輸入。即高度,寬度,顏色等。