CSS 适用于 Firefox，但不适用于 Chrome。我该如何解决？答案

【问题标题】：CSS works in Firefox but not Chrome. How can I fix it?CSS 适用于 Firefox，但不适用于 Chrome。我该如何解决？
【发布时间】：2020-09-11 05:50:53
【问题描述】：

下面是一个简单的 HTML 页面，它在 Chrome 和 Firefox 中的呈现方式截然不同。看起来 Chrome 有一个错误。我很努力，但找不到解决方法让它在 Chrome 中工作。我最好的尝试是用height 将img 包裹在div 中，但是当图片的大小受到浏览器宽度的限制时，它就不能很好地工作了。您能否建议一种解决方法以使其在 Chrome 中运行？

澄清一下：在 Chrome 中，如果我将浏览器窗口设置得非常宽，图片将占据整个宽度，并变得比屏幕高。在Firefox中，图片下方的段落仍然可见，这是我想要获得的。如何让它在 Chrome 中运行？

<!DOCTYPE html>
<html lang="en">

<head>
  <title>CSS Magic</title>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width,initial-scale=1" />
</head>

<body>
  <div style="display:flex;flex-direction:column;max-height:100vh">
    <h1>Title of the page that works in Firefox but not Chrome</h1>
    <img alt="goban" style="margin:auto;height:auto;width:auto;max-height:100%;max-width:100%;" src="https://www.schaakengo.nl/images/productimages/big/goban-13x13-licht-2-.jpg">
    </img>
    <p>This paragraph should be visible, together with the image and the title.</p>
  </div>
  <h2>This does not have to fit vertically in the page</h2>
  <p>This works in Firefox but not Chrome. In Chrome, if I make the browser window very wide, the picture will take the full width, and become taller than the screen. In Firefox, the paragraph below the picture remains visible, which is what I want to obtain.
    How can I make it work in Chrome?</p>
</body>

</html>

【问题讨论】：

请澄清您的具体问题或添加其他详细信息以准确突出您的需要。正如目前所写的那样，很难准确地说出你在问什么。
感谢您阅读我的问题。我编辑了更多细节。

标签： css google-chrome firefox flexbox

【解决方案1】：

我认为它不适用于图像标签，但您可以将其作为背景图像应用到 DIV 并使用 background-size: contain;（以确保整个图像始终显示没有任何东西被切断）和flex-grow: 1;（让空容器获得高度）就可以了：

body {
  margin: 0;
}

.outer_div {
  display: flex;
  flex-direction: column;
  height: 100vh;
}

.img_container {
  background: url(https://www.schaakengo.nl/images/productimages/big/goban-13x13-licht-2-.jpg) center center no-repeat;
  background-size: contain;
  flex-grow: 1;
}

<div class="outer_div">
  <h1>Title of the page that works in Firefox but not Chrome</h1>
  <div class="img_container"></div>
  <p>This paragraph should be visible, together with the image and the title.</p>
</div>
<h2>This does not have to fit vertically in the page</h2>
<p>This works in Firefox but not Chrome. In Chrome, if I make the browser window very wide, the picture will take the full width, and become taller than the screen. In Firefox, the paragraph below the picture remains visible, which is what I want to obtain.
  How can I make it work in Chrome?</p>

【讨论】：

谢谢。通过将 img 包装在 div 中，我设法获得了类似的行为。但它与我想要的不同：你的 outer_div 有一个高度而不是一个最大高度。因此，使用您的解决方案，如果图片没有填满页面的高度，则图片前后会有大量空白。我在 Firefox 中的解决方案没有这个空白。