Safari邊界半徑bug

我知道有很多相關的問題/答案，但他們似乎都沒有解決我的問題，因爲我的圖像是在一個包裝div內，但沒有共享相同的寬度/高度的包裝div（它是更寬），因此圖像的一部分保持不可見，如果我將邊框半徑設置爲包裝div和圖像（我遇到的其中一個解決方案），它不起作用。Safari邊界半徑bug

下面是一個例子：

Safari clipping

藍色邊框是實際的圖像大小，所以設置邊界半徑的圖像應用了圖像的可見部分之外，這不利於。

這裏是一些CSS：

.image_wrapper { 
    display: block; 
    position: absolute; 
    top: 0px; 
    bottom: 0px; 
    left: 0px; 
    right: 0px; 
    overflow: hidden; 
    border-top-left-radius: 27px; 
    border-top-right-radius: 27px; 
    border-bottom-left-radius: 27px; 
    border-bottom-right-radius: 27px; 
} 
.image_wrapper img { 
    width: 288px; 
    margin-left: -48px; 
    height: 100%; 
    border-top-left-radius: 27px; 
    border-top-right-radius: 27px; 
    border-bottom-left-radius: 27px; 
    border-bottom-right-radius: 27px; 
    background-clip: border-box; 
}

在jsbin一整個例子（當打開鏈接點擊CSS標籤來查看其內容）。

那麼你有什麼想法如何解決這個問題？它只發生在Safari，它真的很煩人。

忘記提到的Safari for Windows版本5.1.7

編輯：最後它變成了這個bug出現在最新的Safari瀏覽器的Windows，這是5.1.7和實際上是過時的。它也出現在其他較舊的瀏覽器：

Safari瀏覽器< 6.0
鉻< 24.0
歌劇< 15.0
火狐< 4.0

來源

2014-09-30 Todo

不幸的是，其實是一個錯誤，因爲早期的時代......你必須給邊界半徑圖像本身爲它工作（與WebKit的前綴OFC）） – Pinki 2014-09-30 09:09:39

Safari瀏覽器版？它工作正常版本7.0.6（9537.78.2），OSX Maveric – 2014-09-30 09:12:18

忘記提及Safari的Windows版本5.1.7 – Todo 2014-09-30 09:14:05

-1

嘗試使用這樣的：

-webkit-border-top-left-radius: 27px; 
-webkit-border-top-right-radius: 27px; 
-webkit-border-bottom-left-radius: 27px; 
-webkit-border-bottom-right-radius: 27px;

應該現在的工作

來源

2014-09-30 09:21:11

不，仍然相同後添加-webkit前綴 – Todo 2014-09-30 09:24:30

你有沒有把它們添加到兩個選擇器？ – rnevius 2014-09-30 09:30:14

@rnevius是的，我將它們添加到兩個選擇器。那是賴特嗎？ – Todo 2014-09-30 10:21:46

Safari邊界半徑bug

回答

相關問題