Webkit的溢出問題，改造

出於某種原因，圖像不隱藏在邊框半徑箱溢出時，有後一個元素與變換規則或當圖像是絕對定位。它只出現在第二個或更多元素上。Webkit的溢出問題，改造

我提出這個問題上的jsfiddle一個例子：http://jsfiddle.net/033o1zg3/6/

看起來像WebKit的錯誤，或者是我做錯了嗎？

HTML

<a href="#"> 
     <div class="circle"> 
      <img alt="logo" src="http://lorempixel.com/g/400/200"> 
     </div> 
     <div> 
      <p data-url="/api/locationdata/location-total/1"><i class="fa fa-circle-o-notch fa-spin"></i></p> 
     </div> 
    </a> 
    <a href="#"> 
     <div class="circle"> 
      <img alt="logo" src="http://lorempixel.com/g/400/200"> 
     </div> 
     <div> 
      <p data-url="/api/locationdata/location-total/1"><i class="fa fa-circle-o-notch fa-spin"></i></p> 
     </div> 
    </a>

CSS

a { 
     float: left; 
     width: 150px; 
     background: #ccc; 
     margin: 10px; 
    } 
    .circle { 
     width: 100px; 
     height: 100px; 
     display: block; 
     margin: 0 auto; 
     position: relative; 
     top: 0px; 
     overflow: hidden; 
     margin-top: -30px; 
     border-radius: 100%; 
     border: 3px solid #bcbf00; 
    } 
    .circle img { 
     height: 100%; 
     position: absolute; 
     top: -9999px; 
     left: -9999px; 
     bottom: -9999px; 
     right: -9999px; 
     margin: auto; 
    } 
    p { 
     width: 100%; 
     text-align: center; 
    }

來源

2014-12-04 Royw

這裏codepen你的代碼工作正常 – haykou 2014-12-04 16:51:00

不是真的，但我想你忘了，包括字體真棒，那就是安裝一個轉換事件類「發旋」。 – Royw 2014-12-04 18:29:52

FWIW，這似乎是WebKit中的一個錯誤。我已經簡化你的測試用例並提交的bug的WebKit的團隊：https://bugs.webkit.org/show_bug.cgi?id=140835 – 2015-01-23 21:28:48

好吧，發現How to make CSS3 rounded corners hide overflow in Chrome/Opera

的解決方案看起來像WebKit中的錯誤。唯一的是你需要添加這個包裝div。在我的情況.circle。

-webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC);

來源

2014-12-12 10:43:27 Royw

-1

嘗試transform-style: preserve-3d

來源

2016-08-26 08:24:05 xiaozhu

這個答案出現在低質量的審查隊列中，大概是因爲你沒有提供任何代碼的解釋。如果此代碼回答此問題，請考慮添加一些文字，說明答案中的代碼。這樣，你就更有可能獲得更多讚揚 - 並幫助提問者學習新東西。 – lmo 2016-08-27 16:43:55

也許它的答案太樣，只需將** transform-style：preserve-3d; **添加到班級圈;它在jsfiddle中不起作用，請在瀏覽器中嘗試 – xiaozhu 2016-09-28 07:26:40

Webkit的溢出問題，改造

回答

相關問題