Chrome 而非 Safari 中的 CSS 等高列问题

Question

我使用线性渐变来创建等高的列。在 Safari 中，一切都排列整齐，从桌面到移动设备始终流畅。

我的设置是 2 行，每行包含 2 列，每列下方都有一个图像和一个描述框。图像是响应式的，因此按比例缩小，但在 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;
   }

http://jsfiddle.net/Ht25w/1/

Answer 1

chrome 和渐变有一个错误，这显然不是你的错。最简单的解决方案是给每个人而不是父亲的背景渐变

在每个框中固定文本的解决方案是使用宽度为 50% 的显示表格/表格单元格，为每个表格/表格单元格提供半渐变，并在底部对齐右侧框，同时将文本绝对放置在顶部，如此 [http://jsfiddle.net/Ht25w/8/]