CSS3過濾器不能在邊緣工作

結帳頁面http://www.urbansportsleague.org/gallery 在邊緣顯示懸停的黑色空間。CSS3過濾器不能在邊緣工作

以下是您可能檢查並通知我的代碼。

在此先感謝。

.gallery-img { 
 

 
    height: 250px; 
 

 
    padding: 10px; 
 

 
    -webkit-filter: blur(0.5px); 
 

 
} 
 

 
.gallery-img>img { 
 

 
    max-height: 200px; 
 

 
    width: auto; 
 

 
    -webkit-transform: rotateY(180deg); 
 

 
} 
 

 
.gallery-img>img:hover { 
 

 
    -webkit-filter: contrast(150%); 
 

 
    /* Chrome, Safari, Opera */ 
 

 
    filter: contrast(150%); 
 

 
}

<div class="col-md-4 col-sm-6 gallery-img"> 
 
    <img class="img img-thumbnail" src="http://www.urbansportsleague.org/assets/gallery/1.jpg" /> 
 
</div> 
 
<div class="col-md-4 col-sm-6 gallery-img"> 
 
    <img class="img img-thumbnail" src="http://www.urbansportsleague.org/assets/gallery/2.jpg" /> 
 
</div>

來源

2016-06-10 Joseph

這是因爲它不受支持http://caniuse.com/#feat=css-filters –

http://www.unlockwindows.com/how-to-enable-css3-filters-in-microsoft-edge / – LGSon

CSS過濾器由邊緣根據在https://developer.microsoft.com/en-us/microsoft-edge/platform/status/自己的文檔支持。自2015年11月更新以來，該支持一直存在。

有趣的是，在您的代碼片段中，篩選器適用於我，但在http://www.urbansportsleague.org/gallery上，如果我不刪除.gallery-img > img上的-webkit-transform: rotateY(180deg);規則，則不起作用。當這些東西結合起來的時候Edge可能會有點錯誤嗎？是的，Edge還讀取-webkit-transform，因爲許多網站忘記包含等效的transform規則。

我也嘗試刪除不應該影響過濾器行爲的其他CSS。刪除Bootstrap和背景之後，我將頁面變成了一個破碎的狀態，大多數情況下過濾器都能正常工作。有時候，圖像只是消失了。有時圖像在過濾器被應用於圖像幾分之一秒後消失。

來源

2016-06-10 21:06:06 Larso

CSS3過濾器不能在邊緣工作

回答

相關問題