Firefox上没有三个内联div高度响应

Question

在我的网站上，我有3个内联响应div，大小相同。我在15英寸MacBook Pro上开发了它，它在Safari，Chrome和Firefox（在Mac上）上完美运行。见下图：

但是我正在为我的朋友建造它并且他一直在告诉他说当他去他的微软计算机上的网站时，div不会保持相同的高度，如下所示：

我尝试了很多不同的东西，特别是因为我无法在MacBook上复制问题，我发现很难解决这个问题。这里出了什么问题？

.flexbox {
  display: flex;
}

.trip {
  background-color: white;
  margin-bottom: 10px;
  padding-bottom: 5px;
  max-height: 230px;
  overflow-x: scroll;
  white-space: nowrap;
}

<div class="container flexbox" style="width:100%; background-color:#205ba0; padding:30px;">

  <div class="col-md-offset-3 col-md-2" align="center" style="color:white; border:2px solid white; font-size:12px; padding:10px;">
    <div class="trip">
      <img src="http://localhost/property_abba/wp-content/uploads/2017/05/rent.png" style="height:100px;">
    </div>
    <h2 style="font-weight:bold;">Renting? Landlords welcome.</h2>
    A swift liason between landlords and tenants as a fair, independeant party, is just one of our services.<br><br>
    <a href="http://localhost/property_abba/property-management/" style="color:white;">Find out more ></a>
  </div>

  <div class="col-md-2" align="center" style="color:white; border:2px solid white; font-size:12px; padding:10px;">
    <div class="trip">
      <img src="http://localhost/property_abba/wp-content/uploads/2017/05/val.png" style="height:100px;">
    </div>
    <h2 style="font-weight:bold;">Valuation? Sorted quickly.</h2>
    Providing some of the most effecient valuations in town, we're here to help you sort out an important step.<br><br>
    <a href="http://localhost/property_abba/valuation/" style="color:white;">Find out more ></a>
  </div>

  <div class="col-md-2" align="center" style="color:white; border:2px solid white; font-size:12px; padding:10px;">
    <div class="trip">
      <img src="http://localhost/property_abba/wp-content/uploads/2017/05/sale.png" style="height:100px;">
    </div>
    <h2 style="font-weight:bold;">Selling? Now uncomplicated.</h2>
    We aim to make selling easy. Our trained estate agents are constantly available to help.<br><br>
    <a href="http://localhost/property_abba/sell/" style="color:white;">Find out more ></a>
  </div>

</div>

Answer 1

o.k - 因为很难指出您的确切问题是由于运行时环境和运输环境的变化等原因造成的。使用bootstrap时混合了html和css样式我冒昧地清理你的代码和放大器利用自举网格系统...

iv'添加了一些元素，删除了flexbox＆amp;将所有样式移到css中，让您更容易看到分离，让其他人帮助您......

结果几乎相同，只是我更改了每个“框”占用的列数，因为文本流出div时，当框占用3列时（顺便说一句，这也发生在你以前的代码上）因此我在较小的标题标签（<h5>）中封装了标题的一半（问号后面的语句），现在它在有机会溢出之前改变了大小......

现在你可以继续使用网格系统，直到达到预期的结果......

HTML：

<div id="maincontainer" class="container-fluid row">
  <div id="box1" class="col-md-4 col-sm-4 col-xs-4">
    <div class="trip">
      <img src="http://localhost/property_abba/wp-content/uploads/2017/05/rent.png" alt="">
    </div>
    <h3>Renting? <h5>Landlords welcome.</h5></h3>
    <p>A swift liason between landlords and tenants as a fair, independeant party, is just one of our services.</p>
    <br><br>
    <a href="http://localhost/property_abba/property-management/">Find out more ></a>
  </div>

  <div id="box2" class="col-md-4 col-sm-4 col-xs-4">
    <div class="trip">
      <img src="http://localhost/property_abba/wp-content/uploads/2017/05/val.png" alt="">
    </div>
    <h3>Valuation? <h5>Sorted quickly.</h5></h3>
    <p>Providing some of the most effecient valuations in town, we're here to help you sort out an important step.</p><br><br>
    <a href="http://localhost/property_abba/valuation/">Find out more ></a>
  </div>

  <div id="box3" class="col-md-4 col-sm-4 col-xs-4">
    <div class="trip">
      <img src="http://localhost/property_abba/wp-content/uploads/2017/05/sale.png" alt="">
    </div>
    <h3>Selling? <h5>Now uncomplicated.</h5></h3>
    <p>We aim to make selling easy. Our trained estate agents are constantly available to help.</p><br><br>
    <a href="http://localhost/property_abba/sell/">Find out more ></a>
  </div>
</div>

CSS：

h2{
 font-weight:bold;
}

a{
 color:white;
}

img{
 height:100px;
}

.trip {
 background-color: white;
 margin-bottom: 10px;
 padding-bottom: 5px;
 max-height: 230px;
}

#maincontainer{
 background-color:#205ba0; 
 padding:30px;
 text-align:center;
}

#box1 , #box2 , #box3{
 color:white; 
 border:2px solid white; 
 font-size:12px; 
 padding:10px;
}

CodePen