html - CSS3 过渡在流体宽度设计中创建间隙和重叠

Question

我在流体宽度布局上使用 CSS3 过渡时遇到了问题，特别是当布局的列之间没有间隙时。

http://jsfiddle.net/Zm4fW/2/

HTML

<div class="with-gaps">
   <a href="#" class="quarter"></a>
   <a href="#" class="quarter"></a>
   <a href="#" class="quarter"></a>
   <a href="#" class="quarter"></a>
</div>

CSS

.quarter{
   display:block; 
   width:25%;
   float:left;
   background:#111;
   opacity:0.7;
   height:200px;
   transition:0.3s opacity;
  -webkit-transition:0.3s opacity;
}

.quarter:hover{
   opacity:1
}

我正在创建一个包含图像组合的页面。向页面添加过渡时，不管是哪种过渡，都会发生某种舍入的怪异现象。悬停时，框会错误地将其宽度四舍五入，并产生重叠和间隙。当没有过渡时，如示例中所示，不会发生这种舍入。

我研究了背面可见性，但所做的只是始终显示问题，而不是在过渡期间显示问题。

如果您看不到问题，请调整浏览器窗口的大小，并在悬停 anchor 元素时注意第一行框宽度的缺陷。

有什么办法可以解决这个问题吗？

Answer 1

您可以在外部 div 上设置 display: table，然后在内部元素上使用 display: table-cell。这消除了白/黑线闪烁: demo

如果您需要在浏览器处于不同尺寸时将图像流到多行，您可能需要重构代码。