Question

这让我发疯了 - 我跟随Chris Coyiers发布关于流体宽度相等高度列的帖子。我选择使用Doug Neiner方法，该方法效果很好，唯一的问题是当缩小人造柱时，在safari和chrome之间以不同的“速度”缩小。这意味着safari保持一切整洁和内联，并且铬似乎在所有重要的断点处都是关闭的。我无法理解为什么当它们都被-webkit控制时会发生这种情况。

基本上这是我的设置。

我有两个'行'，每个'是一篇包含图像的文章，然后是一个带有描述的div。在safari中，当我将浏览器缩放到不同的断点时，一切都排成一行。然而，在chrome中创建了一个间隙，就像渐变背景缩小比图像更快。

HTML

 <article class="rowContainer">
  <div class="rowOne">
     <section class="floatLeft textLightGreyArea">
       <img src="..." />
       <p>Description goes here</p>
     </section>

     <section class="floatLeft textDarkGreyArea">
       <p>Description goes here</p>
       <img src="..." />
     </section>
  </div>
 </article>


 <article class="rowContainer">
  <div class="rowTwo">
     <section class="floatLeft textLightGreyArea">
       <img src="..." />
       <p>Description goes here</p>
     </section>

     <section class="floatLeft textDarkGreyArea">
       <img src="..." />
       <p>Description goes here</p>
     </section>
  </div>
 </article>

CSS

     .rowContainer:after {
     visibility: hidden;
     display: block;
     content: "";
     clear: both;
     height: 0;
     font-size: 0;
     }

     .rowContainer {
     display: inline-block;
     }

    .rowOne {
       overflow: hidden;
       background: #c9c9c9;
       background-image: -webkit-gradient(linear, left top, right top, color-stop(0, #c9c9c9),  
       color-stop(49.99%, #c9c9c9), color-stop(49.99%, #e0e0e0), color-stop(100%, #e0e0e0));
       background-image: -webkit-linear-gradient(left, #c9c9c9, #c9c9c9 49.99%, #e0e0e0 49.99%, 
       #e0e0e0 100%);
       background-image: -moz-linear-gradient(left, #c9c9c9, #c9c9c9 49.99%, #e0e0e0 49.99%,    
       #e0e0e0 100%);
       }

       .rowTwo {
       overflow: hidden;
       background: #e0e0e0;
       background-image: -webkit-gradient(linear, left top, right top, color-stop(0, #e0e0e0),   
       color-stop(49.99%, #e0e0e0), color-stop(49.99%, #c9c9c9), color-stop(100%, #c9c9c9));
       background-image: -webkit-linear-gradient(left, #e0e0e0, #e0e0e0 49.99%, #c9c9c9 49.99%,    
       #c9c9c9 100%);
       background-image: -moz-linear-gradient(left, #e0e0e0, #e0e0e0 49.99%, #c9c9c9 49.99%, 
       #c9c9c9 100%);
       }

       .floatLeft {
       width: 49.99%;
       float: left;
       }

Answer 1

我在研究this SO question

时发现了这个问题的答案

这是由于blink（谷歌有分支webkit）渲染渐变的舍入错误。

请参阅this pen获取一个很酷的动画演示，并链接到bug（这些都是另一个SO问题）。

对于相同高度的列使用线性渐变颜色停止在chrome和safari中呈现不同，尽管两者都由-webkit控制？

1 个答案: