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

【问题标题】：My background image displays in google chrome but not in firefox我的背景图片在谷歌浏览器中显示，但在 Firefox 中不显示
【发布时间】：2017-03-07 01:52:15
【问题描述】：

谁能帮我理解为什么 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。

【问题讨论】：

尝试以 px / vh 为单位设置高度，它会起作用
显示你的代码
好域名“eye45”啊哈哈哈

标签： html css image google-chrome firefox

【解决方案1】：

添加显示为表格的样式将为 Firefox 解决此问题。

.right-side {
    display: table;
}

【讨论】：

【解决方案2】：

添加style="display:table"

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

【讨论】：

【解决方案3】：

尝试在您的代码中使用等高列引导 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

【讨论】：

这会在右侧显示图像，但不会让图像滑到下方，当宽度减小时。
感谢您的意见。我今晚没有时间试验你的提议。明天我会进一步研究。
这是一种有趣的方法。

【解决方案4】：

这是 chrome 浏览器的高度问题。用这个

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

【讨论】：

我不会在 Firefox 中将此称为高度问题，因为有问题的 div 没有任何内容。您不妨将其命名为 Chrome 中的高度问题。
谢谢。我已经尝试过了，发现它不会响应并保持与左侧相同的高度。