在IE7/8中模擬CSS3 border-radius和box-shadow

我正在研究小型web應用程序的HTML;該設計要求具有圓角和陰影的內容區域。我已經能夠用CSS3來產生這一點，它完美的作品在Firefox和Chrome：在IE7/8中模擬CSS3 border-radius和box-shadow

CSS3 Version

但是，Internet Explorer 7和8（不支持CSS3）是一個不同的故事：

Internet Explorer Version

是否有一個簡單輕量級的JavaScript解決方案，可以讓我1）使用特定於IE的功能來實現這一點，或2）以一種方式修改DOM（以編程方式），以便在內容周圍添加定製圖像區域模擬效果？

2010-04-22 Adam Maras

在我看來，除了用圖像做這件事之外，沒有很好的解決方案。 JS圓角使用背景圖像/顏色在角落放置元素，以在IE中創建這種效果。我認爲它不是一個合適的解決方案。我會用圖像解決方案，或者等待IE9：P PS：我喜歡這種設計。 – meo 2010-04-26 16:18:34

這是我的方法，我使用條件將CSS文件定位到IE瀏覽器。

假設你有你的div與id #page_container。在您的常規master.css或css3.css文件中，您可以爲它指定寬度，高度，圓角和陰影以及樣式。

現在，當IE瀏覽器打到您的頁面時，它會拉入您設置的css條件。對於同樣的div＃page_container，你可以改變寬度一點，高度，也許一些填充，然後給它一個背景圖像，使它看起來像投影，圓角版本。

所以你頭都會有這樣的：

<head> 
<link rel="stylesheet" type="text/css" href="master.css" /> 
<!--[if lte IE 8]> <link rel="stylesheet" type="text/css" href="ie.css" /> <![endif]--> 
</head>

在master.css文件，你有這個定義你的主DIV：

div#page_container { 
    width: 960px; 
    height: auto; 
    padding: 10px 10px 10px 10px; 
    background: #ccc; 
    drop-shadow: whatever... 
    rounded-corner: whatever... 
}

現在，在你的IE。 css文件，並且因爲它在你的第二個引用中，所以定義將級聯向下，所以你可以改變它一下：

div#page_container { 
    width: 960px; 
    height: auto; 
    padding: 15px 15px 15px 15px; /* this is key */ 
    background: #ccc url(/path/to/image.file) no-repeat top left; 
}

添加足夠的額外填充以使陰影適合您的背景圖像。因爲它會級聯下來，它會覆蓋原來的10px填充，擴展盒子模型以適應您的額外陰影圖形。

夫婦這種方法的好處包括：

只有IE會看到這個定義和調用圖像。如果這是一個高容量的應用程序，這將節省帶寬和與通話相關的任何延遲。同樣，由於您沒有在每個瀏覽器都會看到的圓角圖形中進行硬編碼，因此您的Firefox和Safari用戶無需通過額外的圖像調用就可以訪問服務器。
無需添加在另一個JavaScript的插件，IE瀏覽器的檢查，創建新的標記，時間等信息。

來源

2010-04-30 20:54:00 Braxo

我選擇了這個解決方案，因爲它看起來最乾淨。我將加入一點IE瀏覽器的JavaScript來協助一些DOM級別的修改，以使它更清潔一些。 – 2010-05-01 23:23:35

@Adam Maras--明智的選擇。我在不同的項目上使用了不同的插件，並且總是遇到問題，因爲插件影響了我的其他元素。現在去年我用了類似的方法來解決這個問題，我可以說它在巨大的項目上付出了代價。我會用一個簡單的<5頁網站插件。 – easwee 2011-04-07 14:14:51

這可能是作者的方式，但我認爲一些插件（尤其是pie.htc）已經走過了很長的路，值得一看。這種方法浪費了開發時間，導致瀏覽器丟失市場份額的圖像，而不是包括一個解決方案（如pie.htc），在IE6-8中工作，最小的麻煩和麻煩。我自己很久就抵制了這些插件，但現在它們已經成爲武器庫中非常寶貴的工具。 – LocalPCGuy 2011-08-12 21:15:58

有一個jquery插件可以修改DOM以產生圓角。看看這裏：在IE，Chrome和FF渲染我

http://blue-anvil.com/jquerycurvycorners/test.html

有示範頁面。使用Firebug，你可以看到插件引入了一堆1px×1px的div創建效果。

來源

2010-04-25 04:39:29 rcravens

Nifty Corners Cube產生不錯的結果，應該向下兼容到IE5.5。

來源

2010-04-25 04:47:30 Esko

首先我想提到的是，直到IE9纔有完美的解決方案，其中CSS邊界半徑將實施。

這裏是你必須在那之前不同的解決方案：

你可以使用模擬圓角很多JS腳本之一。但是他們都沒有正確實施陰影。這裏是我嘗試的腳本列表和我的結論。所有這些腳本都有一些共同之處，它們將額外的元素放置在HTML中，以使您看到圓角的幻覺。

DD Roundies：這個腳本非常輕巧，工作得很好。它的工作原理沒有任何框架，並與jQuery &原型（我認爲它與其他人很好地工作，但我無法確定）很好。它在支持CSS3的瀏覽器上使用CSS3屬性。並使用與其他IE瀏覽器相同的方法。在這一個antialiazing工程非常好。編輯我必須在這裏糾正我的自我。這一個與HTC文件一起工作。它不會在HTML中放置其他元素。
Curvy Corners和jQuery Plugin Curvy Corners：我喜歡這個。 antialiazing工作非常好。它可以很好地處理背景圖像。但它對CSS3陰影不太好。它不檢查你的瀏覽器是否支持CSS3，並且總是使用向你的dom添加元素的醜陋解決方案。
Nifty Corners & jquery Corner：兩者有一個壞antialiazing和邊角看起來非常前衛。 jQuery的角落處理背景圖片很麻煩。

這就是爲什麼他們都不在我看來是一個妥善的解決辦法：

curvy corners dom messing screenshot http://meodai.ch/stackoverflow/curvy.png 彎曲的DOM一團糟

nifty dom mess http://meodai.ch/stackoverflow/nifty.png 漂亮的DOM一團糟

還有一些其他的，但我認爲他們在這個地方不值得提及。

正如你所看到的，他們正在爲你的dom增加許多元素。如果您想向大量元素添加圓角，這可能會造成麻煩。它可以使一些舊的瀏覽器/電腦崩潰。對於陰影，它幾乎是同樣的問題。有一個jQuery插件，在處理箱和字體陰影： http://dropshadow.webvex.limebits.com/

我的結論：如果我做一個小的預算工作，IE用戶只是邊緣和沒有陰影。如果客戶有一些錢花，所以我只用CSS做，我爲每個角落製作圖片。如果他們絕對必須在那裏，但沒有時間或沒有錢去做，我會優先使用其中一個提到的JS Scripts DD_roundies。現在它取決於你。

PS：IE用戶都習慣於醜陋的界面，他們不這樣做會看到角落和陰影缺失呢：P

來源

2010-04-26 18:05:02 meo

對於'PS'加上+1我認爲CSS應該允許優雅退化，如果更新/冷卻器功能不存在。我也認爲IE用戶應該受到一點點傷害，但這只是我的鬥氣...... =） – 2010-04-28 06:21:36

+ PS也是如此。不能同意更多。 IE是所有Web開發人員的禍根。 – 2010-04-30 02:54:20

退房這個帖子：http://www.smashingmagazine.com/2010/04/28/css3-solutions-for-internet-explorer/

它涵蓋了特別圓角IE7/8中CSS3的盒子陰影。

來源

2010-04-28 12:53:34

+1對我來說看起來不錯。我已經在IE6,7和8中對它們進行了測試，並且它們非常慢，但它們工作正常。（特別是四角的圓角很長，我不知道它是如何覆蓋整個頁面的） – meo 2010-04-28 15:04:29

問題是這些解決方案是否會相互作用，給我圓角和陰影。我會調查。 – 2010-04-28 21:11:34

你可以結合這兩種技術。這個問題是你的服務器能夠加載HTC文件。 – meo 2010-04-29 11:33:39

在IE下拉陰影使用方法：

.shadow { 
    background-color: #fff; 
    zoom: 1; 
    filter: progid:DXImageTransform.Microsoft.Shadow(color='#969696', Direction=135, Strength=3); 
}

爲圓角使用DD_roundies如下所述，只是9KB是在第二有圓角一個很好的妥協！ ;-)

當然爲programmatically IE-specific features使用conditional comments！ ;-)

來源

2010-04-29 11:47:07

我用在這裏找到宏達腳本開始： CSS3 support for Internet Explorer 6, 7, and 8

這對IE6 +是我見過的CSS3最簡單的實現。


.box { 
    -moz-border-radius: 15px; /* Firefox */ 
    -webkit-border-radius: 15px; /* Safari and Chrome */ 
    border-radius: 15px; /* Opera 10.5+, future browsers, and now also Internet Explorer 6+ using IE-CSS3 */ 

    -moz-box-shadow: 10px 10px 20px #000; /* Firefox */ 
    -webkit-box-shadow: 10px 10px 20px #000; /* Safari and Chrome */ 
    box-shadow: 10px 10px 20px #000; /* Opera 10.5+, future browsers and IE6+ using IE-CSS3 */ 

    behavior: url(ie-css3.htc); /* This lets IE know to call the script on all elements which get the 'box' class */ 
}

來源

2010-04-29 22:29:45 MikeM