Question

在流体宽度布局上使用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>

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
}

我正在创建一个包含图像组合的页面。在向页面添加转换时，无论何种转换都无关紧要，存在某种舍入怪异现象。当悬停时，盒子的宽度不正确，并产生重叠和间隙。当没有转换时，如示例中所示，这种舍入不会发生。

我已经研究过背面可见性，但所有这一切都是在过渡期间始终显示问题。

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

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

Answer 1

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

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

CSS3过渡在流体宽度设计中产生间隙和重叠

1 个答案: