Css 在chrome和safari中，使用线性渐变色挡对等高列进行不同的渲染，尽管两者都由-webkit控制？

这让我抓狂——我一直在关注Chris Coyiers关于流体宽度等高柱的帖子。我选择使用Doug Neiner方法，这种方法非常有效，唯一的问题是，当缩小人造柱时，safari和chrome之间的“速度”不同。这意味着safari让一切都保持整洁和内联，chrome似乎在所有重要的断点处都处于关闭状态。我不明白当它们都由-webkit控制时，为什么会发生这种情况

基本上这是我的设置

我有两行，每一行是一篇文章，其中包含一个图像，然后是一个div，下面有一个描述。在safari中，当我将浏览器缩小到不同的断点时，所有内容都会对齐。然而，在chrome中会产生一个间隙，就像渐变背景比图像缩小得更快一样

HTML

---

我在研究中发现了这个问题的答案

这是由于blink（谷歌已经将webkit分支）渲染渐变时的舍入错误造成的

---

查看一个很酷的动画演示和bug的链接（这些都在另一个SO问题中）。

我在研究时发现了这个问题的答案

这是由于blink（谷歌已经将webkit分支）渲染渐变时的舍入错误造成的

---

查看一个很酷的动画演示和bug的链接（这些都在另一个SO问题中）。

并非所有的WebKit都是平等创建的。那么有没有办法解决这个问题？我想也许有一种方法可以让我只针对chrome的渐变百分比，并使用媒体查询在每个断点处排列它？这在chrome中造成了一个缺口，而不是内联缩小，所以如果可能的话，我需要找到一种解决方法。看这个类似的问题，并不是所有的WebKit都是平等创建的。好的，有没有办法解决这个问题呢？我在想，也许有一种方法可以让我只针对chrome的渐变百分比，并使用媒体查询在每个页面上排列它断点？这在chrome中造成了一个缺口，而不是内联缩小，所以如果可能的话，我需要找到一种解决方法

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

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