Question

有人可以帮我理解为什么Chrome而不是Firefox能够在右侧显示树的背景图片以及如何修复：www.eye45.com

签订网页浏览器时，

<div class="col-sm-6 left-side">
<div class="col-sm-6 right-side">

应该保持相同的高度，直到 @media（max-width：780px）{}然后树图像应该在紫色段落下翻转并减小到200px的高度。

它适用于Chrome，但不适用于Firefox。

Answer 1

使用display作为表添加样式将为firefox修复此问题。

.right-side {
    display: table;
}

Answer 2

添加style="display:table"

<div class="col-sm-6 right-side" style="display: table;">
        </div>

Answer 3

这是Chrome浏览器中的高度问题。使用这个

.right-side {
  min-height: 500px;
}

Answer 4

尝试在代码中使用相等高度的列bootstrap css。

参考：http://getbootstrap.com.vn/examples/equal-height-columns/

.left-side {
  background: #bbb4e5 none repeat scroll 0 0;
  color: #fff;
  display: table-cell;
  padding: 2%;
}
.right-side {
  background: url("https://s3.amazonaws.com/igd-wp-uploads/2014/05/Perfei%C3%A7%C3%A3o-Igni%C3%A7%C3%A3o-Digital.jpg") no-repeat 50% center / cover ;
}
.row-eq-height {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display:         flex;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row row-eq-height">
  <div class="col-sm-6 left-side">
    <p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p>
    <p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p>
    <p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p>
  </div>
  <div class="col-sm-6 right-side">

  </div>

</div>

以下是演示：http://codepen.io/anon/pen/jrJBzz

我的背景图片显示在谷歌浏览器中，但不显示在Firefox中

4 个答案: