IE9中的漸變+圓角CSS問題

Question

在當前項目中，我在CSS文件中使用了CSS3漸變。 為了支持IE瀏覽器，我也使用了filter屬性。 以下是我的代碼：

.card.active .content.back {
  background: #333; /* Old browsers */
  background: -moz-linear-gradient(top, #333 0%, #0e0e0e 100%); /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#333), color-stop(100%,#0e0e0e)); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top, #333 0%,#0e0e0e 100%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top, #333 0%,#0e0e0e 100%); /* Opera11.10+ */
  background: -ms-linear-gradient(top, #333 0%,#0e0e0e 100%); /* IE10+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#333333', endColorstr='#0e0e0e',GradientType=0 ); /* IE6-9 */
  background: linear-gradient(top, #333 0%,#0e0e0e 100%); /* W3C */

}

但是當我在上面的代碼中使用filter屬性時， border-radius屬性不起作用。 如果有人知道解決方法，請與我分享。

謝謝

Answer 1

您可以使用PIE.htc獲得所需的結果。

PIE代表漸進Internet Explorer。 這是IE附帶的行為，當應用於元素時，它允許IE識別並顯示許多CSS3屬性。

PIE當前為以下CSS3功能向IE 6至8添加了全部或部分支持：

border-radius
box-shadow
border-image
multiple background images
linear-gradient as background image

此外，PIE在IE 9中增加了對邊框圖像和線性漸變的支持，而IE 9已經本地支持其他功能。

http://css3pie.com/

或查看演示： -http : //jsfiddle.net/ZxzSs/1/

為了支持PIE.htc，您必須將PIE.htc文件保留在根目錄下，而不適合在您的網站上使用。...

Answer 2

您應該能夠將漸變應用於具有圓角的元素的子級。 我沒有在家用計算機上訪問IE9的權限，但這應該可以工作：

.element {
    background: linear-gradient(top, #333 0%,#0e0e0e 100%); /* W3C */
    border-radius: 10px;
}
.element .ie-helper {
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#333333', endColorstr='#0e0e0e',GradientType=0 );
}

HTML：

<div class="element">
    <!--[if lt IE 9]><div class="ie-helper"><![endif]-->
    <p>Your content with gradient and rounded corners...</p>
    <!--[if lt IE 9]></div><![endif]-->
</div>

如果在IE10 +或其他瀏覽器中查看了該頁面，則漸變和圓角都將應用於同一元素（假設您從代碼示例中帶回了供應商特定的前綴）。 內部的div.ie-helper將僅在IE9及更低版本上呈現，這是因為使用了條件注釋 。

這不是一個理想的方法，但是可以完成工作，但是由於您需要廣泛支持的各種瀏覽器，因此這是一個合理的解決方法