邊界半徑的問題，7

。我已低於我用我的網站，除了IE菜單的圖像，所有其他瀏覽器呈現正確的輸出：邊界半徑的問題，7

enter image description here

即使在IE9中，懸停效果應該是曲線，但它會產生矩形效果。

的Firefox，Safari和Chrome瀏覽器的罰款： enter image description here

的CSS

header nav { 
padding:7px 0 10px 0; 
} 
header nav ul { 
float:right; 
padding:2px 0 0 0; 
} 
header nav ul li { 
    float:left; 
    padding-left:4px; 
    } 
    header nav ul li a { 
    position:relative; 
    float:left; 
    font-size:14px; 
    color:#fff; 
    text-decoration:none; 
    font-family: 'ColaborateThinRegular'; 
    text-transform:uppercase; 
    height:32px; 
    line-height:32px; 
    background-color:#181717; 
    padding:0 36px 0 10px; 
    border-radius:17px; 
    -moz-border-radius:17px; 
    -webkit-border-radius:17px; 
    } 
    header nav ul li a:hover, 
    header nav ul li a.current { 
    background-image: -moz-linear-gradient(top, #E53088, #E530C1); /* FF3.6 */ 
    background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, #E53088),color-stop(1, #E530C1)); /* Saf4+, Chrome */ 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#E53088', endColorstr='#E530C1'); /* IE6,IE7 */ 
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#E53088', endColorstr='#E530C1')"; /* IE8 */ 
border-radius:17px; 
    -moz-border-radius:17px; 
    -webkit-border-radius:17px; 

    }

我正在尋找像火狐，Chrome和Safari瀏覽器相同的行爲

來源

2011-10-17 Mr A

'邊界radius'是CSS3功能，而IE6/7/8 CSS3時代以前的瀏覽器。 –

對不起，我忘了添加我正在使用的CSS，我剛剛上傳了它 –

在Internet Explorer中的梯度過濾器沒有得到由border-radius在Internet Explorer中截取9.我能想到的唯一的解決方案涉及具有內<div>元件與梯度施加：

<nav> 
    <ul> 
    <li> 
     <div class="gradient">Home</div> 
    </li> 
    </ul> 
</nav>

應用border-radius到<li>元素，梯度爲<div class="gradient">。這應該會給出正確的結果。

唯一的其他選擇，因爲薩爾曼中提及，爲CSS3 PIE，其變通解決此問題爲你和在舊版本的IE實現border-radius。我在幾個項目中使用它，它工作得很好。

來源

2011-10-17 10:55:08

這是一個在IE中的錯誤，我們總是不得不使用黑客來解決IE問題，爲什麼他們不使它像鉻一樣簡單.. –

嗯，這聽起來像它可能是一個IE9的錯誤。其他瀏覽器在過去已經通過這種邊界半徑的問題（例如，Firefox 3.0沒有剪切帶有邊界半徑的''標籤的角落），所以如果這是IE錯誤，那麼令人沮喪的是IE沒有從別人的錯誤中吸取教訓。 – Spudley

@Spudley：我相信這只是因爲過濾器已過時。他們似乎沒有得到每個版本的IE更新，這也可以解釋爲什麼alpha問題從未被其他過濾器修復。一個過濾器只是看到一個元素的尺寸，並重新繪製一個矩形代替元素（類似於二元行爲的工作方式）。我不會感到驚訝，如果過濾器已被棄用，甚至在IE 11中不存在。 –

嘗試

.class { 
border-style: solid; 
border-width: 2px; 
-moz-border-radius: 15px; 
-webkit-border-radius: 15px; 
border-radius: 15px; 
}

只是一個簡單的例子

來源

2011-10-17 10:41:34 Side

對不起，我忘了添加我正在使用的CSS，我剛剛上傳它 –

看看CSS3 PIE項目。它將在IE 6至9中提供各種CSS3功能;包括圓角。

來源

2011-10-17 10:42:22

對不起，我忘了添加我正在使用的CSS，我剛剛上傳it –

我只是看着你的CSS，我確定CSS3 PIE會使'線性漸變'和'border-radius'屬性在老版本的IE中工作。在IE的項目主頁上打開演示，看看它是否給你預期的結果。 –

+1 CSS3Pie非常適合這類事情，並且會解決您的IE7/8問題。（不知道你的IE9問題;這是一個單獨的問題，完全） – Spudley

Twitter的引導執行以下操作來解決這個問題：

filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);

來源

2012-07-09 17:17:37

邊界半徑的問題，7

回答

相關問題