跨瀏覽器和系統的圖像的邊框半徑不一致？

我發現了跨瀏覽器border-radius實現的一些奇怪行爲。以下代碼：http://jsfiddle.net/pm7FZ/1/在Windows上，每個瀏覽器摘錄Chrome都會輪播內部圖像：http://imgur.com/54In8 Chrome不會，圖像保持正方形。跨瀏覽器和系統的圖像的邊框半徑不一致？

我沒有OS X，但我的朋友給我發這樣的：https://img.skitch.com/20120925-eypjk593tdest3ud9hcji1sauf.png似乎它的行爲不同。雖然另一位朋友說，如果在OS X上將border-radius設置爲20px，它將圍繞OS X的Firefox版本的圖像角落。

問題 - 這裏發生了什麼？爲什麼這麼多不一致。

這顯然容易「修復」，只是好奇。

來源

2012-09-25 z-x

它基本上是一個問題，爲什麼一個瀏覽器支持一個功能，而另一個不支持... – Christoph

不同的實現和沒有實現是兩個單獨的事情。 –

不，不是。在這兩種情況下，你都不能依賴這個特性，專業環境中的重點是什麼。 – Christoph

我只能推測，但在這裏我懷疑是怎麼回事。如果您查看了基本框模型的W3C規範（http://www.w3.org/TR/2007/WD-css3-box-20070809/），您將看到一個圖形，演示如何佈置元素。每個元素都有一個內容區域，填充，邊框和邊距區域。我相信瀏覽器會將每個區域渲染爲一個圖層，並且FF會在內容層頂部呈現「邊框圖層」，Chrome將在所有其他圖層上渲染「內容圖層」。在您的示例中，如果您要從img標記中移除高度和寬度屬性，則會看到圖像確實四捨五入，但不受邊框本身的影響。我還沒有找到任何關於瀏覽器應該如何處理這個問題的規範，但我很確定Chrome開發者選擇了這種方法來擠出更多的性能。

來源

2012-09-25 13:43:15 hradac

跨瀏覽器和系統的圖像的邊框半徑不一致？

回答

相關問題