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

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

在每个框中修复文本的解决方案是使用宽度为50％的显示表/表格单元格，为每个框架单元格提供一半渐变，底部对齐右框，同时将文本绝对定位到顶部，如此[http：// jsfiddle.net/Ht25w/8 /

Chrome中的CSS Equal Height列问题不是Safari

1 个答案: