IE邊框半徑使邊框和背景曲線不同角落

我有一個<div>有background和border。IE邊框半徑使邊框和背景曲線不同角落

我定義了border-radius: 10px 0 10px 0，IE使邊框在右上角和左下角四捨五入，而背景在其他角落四捨五入。

所以我有兩個角落有一個方形邊框，背景沒有達到結束，兩個圓形邊框和背景突出。

我應該說當我添加direction: ltr它修復它，但我需要direction: rtl。

如果我指定border-top-right: 10px等等，這是一回事。邊界將在錯誤的角落。

來源

2012-09-12 Dotan

我想看看這個！我想解決方案是創建2個容器。 1的邊界，1的背景......但它吸了很多！ –

IE在邊界和RTL方面有問題。 – BoltClock

在IE中打開這個http://jsfiddle.net/CLwHt/ – Dotan

是否有黑客攻擊計數？

#div1 { 
    direction:rtl; 
    border:1px solid black; 
    background:green; 
    border-radius:10px 0 10px 0; 
    margin:20px auto; 
    width:300px; 
    padding:10px; 
    -ms-transform: rotate(180deg); 
} 
:root #div1 { 
    direction: ltr \9; /* IE9+ */ 
} 
#div1 > span { 
    direction: rtl; 
    -ms-transform: rotate(180deg); 
}

在<span>環繞文本內容：

<div id="div1"> 
    <span>some text</span> 
</div>

來源

2012-09-12 14:52:04 lpd

想到這件事，就像Armel L建議的那樣，我希望有更直接的東西，不會讓我添加不必要的標籤 – Dotan

@DotanReis我會擁有認爲跨度標籤是解決問題的最不具侵入性的補充;語義維護。當然，CSS很噁心，但它簡明扼要地完成了這項工作...... – lpd

IE邊框半徑使邊框和背景曲線不同角落

回答

相關問題