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

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

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>

我正在创建一个包含图像组合的页面。当向页面添加过渡时，无论是哪种过渡，都会出现某种舍入的奇怪现象。鼠标悬停时，长方体的宽度不正确，会产生重叠和间隙。当没有过渡时，如示例中所示，不会发生舍入

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

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

---

有没有办法解决这个问题？

您可以在外部div上设置

显示：表格

，然后在内部元素上使用

显示：表格单元格

。这消除了闪烁的白/黑线：

---

当浏览器大小不同时，如果需要将图像流到多行，则可能需要重构代码。

您是说鼠标悬停时方框之间的白线吗？是的，鼠标悬停时四个方框之间的线条和重叠部分。根据窗口大小的不同，它看起来会有所不同。由于某些原因，小提琴页面本身仍然会有轻微的闪烁。我想知道是什么原因导致了这种情况，以及为什么它在显示为表格/表格单元格时会起作用。

.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
}