如何避免元素在徘徊時調整大小

Question

我一直在爲此奮鬥了幾個小時，我用我能想到的所有東西重寫了css，但仍然沒有任何東西。

基本上我作了一個簡單的照片網格與< UL>其中每個< LI>認爲應該是12.5％的父元素的寬度的所以我得到8的圖像每行有個圖片。圖片的不透明度爲.2,，並且在盤旋時變爲1。

這聽起來超級簡單，當我想到它時，我不會考慮花費超過幾分鐘，但事實並非如此。

的問題是，通過要素1px的徘徊的時候，所以我得到186×187，等改變其比例。這會導致保證金爲1px，這真的很煩人，因爲它也會使圖像晃動一點。

當瀏覽器的寬度較小時，它似乎會發生更多。

現在，這是我在測試結構（我知道，我不想空div。它有一個解決方案，別人建議。）

<section id="home" class="group"> 

<img class="intro" src="img/home.png"> 

<div id="bg"> 

<li> 
    <img class="bcg" src="img/0.jpg"> 
    <div class="cambia" style="background: url(img/01.jpg)"></div> 
</li> 

</ul> 
</div> 

的<李>是主容器中，.bcg IMG是一個透明的按鈕，我放置懸停因爲我的背景和按鈕之間的一個多元件，所以我有3的z-index水平

.intro{ 
width: 36%; 
border-radius: 99% 78% 34% 17%; 
position: absolute; 
display: block; 
margin: 1% 31%; 
z-index: 10;} 

#home ul{ 
width: 110%; 
position: relative; 
left: -3%; 
background: white; 
padding-bottom: 36%} 


#home li{ 
float: left; 
overflow: hidden; 
position: relative; 
width: 12%; 
padding-bottom: 12%;} 

.box{ 
left: 0px; 
top: 0px; 
overflow: hidden; 
position: absolute;} 

.cambia{ 
width: 100%; 
opacity: .25; 
position: absolute; 
z-index: 1; 
padding-bottom: 100%; 
background-size: cover!important; 
transition: .4s ease-in-out .09s;} 

.bcg{ 
position: absolute!important; 
opacity: .0!important; 
background: red; 
z-index: 30!important; 
width: 100%;} 

.bcg:hover ~ .cambia{ 
opacity: 1!important;} 

Answer 1

嘗試將backface-visibility添加到li元素。

-webkit-backface-visibility: hidden; 
    -moz-backface-visibility: hidden; 
    -ms-backface-visibility: hidden; 
    backface-visibility: hidden;