IE9中的<a>的邊框半徑錯誤

看到<div>元素正確渲染border/border-radius，但任何具有背景，邊框和邊框半徑設置的<a>或<button>都將背景顏色或圖像顯示爲正方形，以及只有邊界是圓的。嘗試設置<a> & <button>到display: block或display: inline-block但沒有奏效。IE9中的<a>的邊框半徑錯誤

是否有已知的解決方法？

這裏是從的Webkit的計算樣式的鏈接：https://gist.github.com/773719

alt text

下面是IE9開發工具計算風格： alt text

更新使用過濾器：;或者-ms-filter :;屬性在IE中具有漸變使背景突破定義的邊界半徑。

來源

2011-01-10 adamyonk

這是隻在IE9？如果沒有，你可以發佈一些CSS？ – 2011-01-10 23:42:37

當然，它只在IE9中。 IE8不支持`border-radius`。 – SLaks 2011-01-10 23:45:42

跑進去也是這樣。基於「過濾器」的漸變實際上並不是背景圖片，因爲它與CSS3漸變是一個額外的圖層。 IE團隊顯然還沒有將這些過濾層裁剪成圓角。奇怪，因爲很明顯人們會製作像這樣的按鈕。

將遺留功能映射到新功能一定是痛苦的。他們可能會更好地在CSS中實現漸變。我寧願添加一個前綴而不是添加舊版過濾器。

來源

2011-02-11 11:35:42

我發現這個優秀的博客中，顯示瞭如何使用SVG梯度精靈來解決這個特定問題：http://abouthalf.com/2010/10/25/internet-explorer-9-gradients-with-rounded-corners/此

來源

2011-02-21 17:06:24

一種解決方案是使用CurvyCorners，一個JavaScript的解決方案。它一直工作回到IE6，但與漸變背景鬥爭。如果您使用的是塊彩色背景，但它可以正常工作，並且處理了迄今爲止我所發現的所有邊框類型。該網站說，你需要調用它，但不知何故，我發現它似乎工作，只需包括.js和使用css3 css3 border-radius屬性。

來源

2011-05-30 23:43:22

解決方案是將梯度嵌套在另一個元素中，邊界半徑和溢出。這並不理想，但它的所有CSS。沒有黑客。

除此之外，使用背景圖像對ie來說工作得非常好。

<div class="corner"> 
    <div class="grad">button</div> 
</div> 


<style> 
.corner, 
.grad{ 
    height:50px; 
    width:250px; 
    } 
.corner{ 
    -webkit-border-radius: 10px; 
    -moz-border-radius: 10px; 
    border-radius: 10px; 
    overflow:hidden; 
    } 
.grad{ 
    border:1px #659300 solid; 
    background: #659300; /* old browsers */ 
    background: -moz-linear-gradient(top, #659300 0%, #6F9B00 50%, #528200 51%, #6CA501 100%); /* firefox */ 
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#659300), color-stop(50%,#6F9B00), color-stop(51%,#528200), color-stop(100%,#6CA501)); /* webkit */ 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#b1cc00', endColorstr='#518e00',GradientType=0); /* ie */ 
    } 
</style>

來源

2011-06-06 16:11:39 user401183

我正在使用Ultimate CSS Gradient Generator。它建議使用此代碼禁用IE9中的過濾器：

<!--[if gte IE 9]> 
    <style type="text/css"> 
    .gradient { 
     filter: none; 
    } 
    </style> 
<![endif]-->

這應該可以解決您的問題。

來源

2012-08-28 08:19:34

IE9中的<a>的邊框半徑錯誤

回答

相關問題