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