CSS overflow:hidden 在 Firefox 中有效，但在 Chrome 中无效。为什么

在本文中，我们将介绍为什么 CSS 中的 overflow:hidden 在 Firefox 浏览器中有效，但在 Chrome 浏览器中无效的原因。overflow:hidden 是一种常用的 CSS 属性，用于控制元素的溢出内容的显示方式。如果元素的内容超出了其指定的尺寸，overflow:hidden 会将多余的内容裁剪，并隐藏在元素之外。

然而，在 Firefox 和 Chrome 浏览器之间，overflow:hidden 的工作方式可能有一些差异，导致在某些情况下在 Firefox 中有效，在 Chrome 中无效。下面我们将深入探讨几个可能导致这种差异的原因。

阅读更多：CSS 教程

渲染引擎差异

Firefox 和 Chrome 使用不同的渲染引擎来处理网页内容的显示。Firefox 使用的是 Gecko 渲染引擎，而 Chrome 使用的是 Blink 渲染引擎。这两个渲染引擎在实现某些 CSS 属性时可能存在细微的差异，因此导致了 overflow:hidden 在这两个浏览器中的工作方式不同。

例如，当父容器的高度被设置为固定值，而子元素的高度超出了这个固定值时，Firefox 可能会自动将父容器的 overflow 属性设置为 hidden，从而达到裁剪子元素溢出内容的效果。而 Chrome 则可能不会自动设置父容器的 overflow 属性，导致 overflow:hidden 不起作用。

Box Sizing 属性

另一个可能导致 overflow:hidden 工作方式不同的原因是元素的 box-sizing 属性。box-sizing 可以用来指定元素的尺寸计算方式。常见的两个取值是 content-box 和 border-box。content-box 模式是指将元素的尺寸仅包括内容区域，而 border-box 则将元素的尺寸包括了内容区域、内边距和边框。

在 Firefox 中，对于父容器使用 overflow:hidden 并设置宽度、高度后，子元素的宽度和高度会被自动调整，以适应父容器的尺寸。但在 Chrome 中，如果元素的 box-sizing 属性设置为 border-box，则子元素的尺寸会超出父容器，导致 overflow:hidden 无效。

以下是一个示例代码，展示了这种情况：

<style>
  .container {
    width: 200px;
    height: 200px;
    overflow: hidden;
    border: 1px solid black;
    box-sizing: border-box;
  }

  .child {
    width: 300px;
    height: 300px;
    background-color: red;
  }
</style>

<div class="container">
  <div class="child"></div>
</div>

在 Firefox 浏览器中，父容器会将子元素的溢出内容裁剪，并显示一个200×200像素的红色框。但在 Chrome 浏览器中，父容器不会将子元素的溢出内容裁剪，而是显示了完整的300×300像素的红色框。