如何解決邊框半徑與盒子陰影相結合的IE渲染？

有沒有人有關於如何「修復」在IE 9和10中的陰影和邊框半徑組合的渲染的想法？如何解決邊框半徑與盒子陰影相結合的IE渲染？

使用插入陰影時尤其明顯。在IE瀏覽器中，陰影的半徑與webkit/gecko相差甚遠...

在這張圖片中，你可以看到問題所在。左側是一個帶有插入框陰影的按鈕，右側沒有箱形陰影。（不介意不同的字體渲染）

enter image description here

2013-04-24 ThomasM

偉大的問題。瀏覽[W3規格]（http://www.w3.org/TR/css3-background/#the-border-radius），我不確定哪個用戶代理具有它的權利（或者如果此行爲已定義）。我無法從WHATWG中找到任何細節（這通常深入到瀏覽器實現中）。看來盒子陰影的內半徑需要邊界的*外*半徑，所以像[this]（http://jsfiddle.net/JMVgd/3/）這樣的東西實際上是正確匹配的。但是，如果沒有邊界，則外部寬度的推斷會導致您看到的不理想的結果。我無法找到解決方法。 – 2013-05-01 20:42:30

Chrome，Firefox和Opera都正確地將插入的瀏覽器寬度解釋爲相對於元素內部顯示的空間。雖然IE永遠不會區分內部和外部空間，並總是使用外部邊界的曲率。點擊此處查看：http：//dabblet.com/gist/5503928 IE的內嵌框陰影與10px外邊框的曲率完美匹配。其餘的不簡單地顛倒邊界樣式，他們根據元素的邊界重新計算它。 IE的實現是錯誤的，如果我們誠實，似乎很懶惰。 – 2013-05-02 17:41:23

只有當插圖陰影的擴散引發更大的「陰影半徑」比出現該問題IE中邊界半徑的大小。在您的示例中將border-radius設置爲50px，並且在IE和Chrome中看起來相同。

如果你需要一個更大的盒子陰影傳播，那麼你可以使用一個邊框來代替，至少在你的例子中可以做到這一點。例如：http://dabblet.com/gist/5501799

你可能會看到另一個問題是，IE和Chrome渲染的box-shadow完全不同的模糊，但我相信你不會在你的例子出於這個原因使用它......

來源

2013-05-02 12:10:01 Willem

不理想，但我猜最好的解決方案。問題是邊界必須在懸停時進行動畫處理，所以按鈕會稍微跳躍：/ – ThomasM 2013-05-07 07:55:24

我剛剛嘗試在同一時間對邊框和填充進行動畫處理：確實看起來有點跳躍：http://jsfiddle.net/w1ll3m/TkpQm/。也許'box-sizing：border-box;'可以通過固定按鈕的總寬度以某種方式幫助你。 – Willem 2013-05-07 08:39:42

-4

試試這個： // CSS

.box { 
    border-radius: 15px; 
    -moz-border-radius: 15px; 
    -webkit-border-radius: 15px; 
    -khtml-border-radius: 15px; 

    -moz-box-shadow: inset 0 0 10px #000; 
    -webkit-box-shadow: inset 0 0 10px #000; 
    box-shadow: inset 0 0 10px #000; 

    width: 200px; 
    height: 100px; 
}

對於IE8你必須包括CSS3餅圖（pie.htc）文件，然後它將在IE8上工作。

你可以從這裏下載：http://css3pie.com/

來源

2013-04-24 10:29:06

問題不在於它沒有渲染。它只是無法正確呈現。 – ThomasM 2013-04-24 11:41:31

你添加了CSS以上嗎？它將工作添加下面的CSS .box { \t border：5px solid＃000; \t border-radius：15px; \t -moz-border-radius：15px; -webkit-border-radius：15px; -khtml-border-radius：15px; \t -moz-box-shadow：inset 0 0 10px＃000; \t -webkit-box-shadow：inset 0 0 10px＃000; \t box-shadow：inset 0 0 10px＃000; \t width：200px; \t height：100px; } http://jsfiddle.net/WcLKr/ – 2013-04-24 13:50:59

就像我說的，那不是問題所在。注意聲明中的額外0：插入0 0 0 10px＃000。現在在IE8和IE9中測試，它比webkit/gecko提供了一個醜陋的渲染。 – ThomasM 2013-04-24 15:29:45

快速（半髒）解決方案，我曾嘗試和作品，是一個div裏面一個div。讓我知道如果這樣做。

HTML代碼：

</head> 
<body> 
<div class="box"><div class="box-inside"></div></div> 
</body> 
</html>

CSS代碼：

.box { 
border-radius: 15px; 
box-shadow: inset 0 0 0 10px #000; 
width: 200px; 
height: 100px; 
background: #000; 
} 
.box-inside { 
border-radius: 15px; 
box-shadow: inset 0 0 0 10px #fff; 
width: 175px; 
height: 75px; 
position: relative; 
top: 12%; 
left: 6%; 
background: #fff; 
}

我jsfiddle

來源

2013-04-29 18:56:06 Cam

尋找更實用的解決方案......謝謝！ – ThomasM 2013-04-29 21:13:24

我用你的代碼做了幾次嘗試，但它似乎是一個IE問題，我會檢查webkit，看看它是否提供了一個解決方案。 http://css-tricks.com/almanac/properties/b/border-radius/ – Cam 2013-04-29 21:22:49

試試這個，添加這個角色：

filter:progid:DXImageTransform.Microsoft.Blur(PixelRadius='15', MakeShadow='true', ShadowOpacity='1');

來源

2013-05-02 20:46:10 Rob1n

您可以放心地使用inset框的陰影來模擬邊界在現代瀏覽器，但IE誤呈現半徑。你可以通過讓IE回落到默認的「開始」風格來解決這個問題。

.Button { 
    color: #0ac; 
    background-color: #fff; 
    border-radius: 8px; 
    box-shadow: inset 0 0 0 2px #0ac; 
} 

/* IE media query hack */ 
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { 
    .Button { 
    box-shadow: 0 0 0 2px #0ac; 
    } 
}

來源

2017-12-05 01:20:34

如何解決邊框半徑與盒子陰影相結合的IE渲染？

回答

相關問題