Safari中的css宽度0和溢出隐藏问题答案

【问题标题】：css width 0 and overflow hidden issue in safariSafari中的css宽度0和溢出隐藏问题
【发布时间】：2013-10-18 14:21:42
【问题描述】：

我在 Safari 中遇到了我认为的错误，我想知道是否有人能够解释为什么会发生这种结果。我在下面包含了一个非常简单的示例，但基本上我的问题是这个。我有一个宽度为 300 像素、高度为 80 像素的子元素，我有一个嵌套在宽度为 0 像素的父元素中的子元素和隐藏的溢出。这两个元素被包裹在一个没有设置宽度的容器中，并且所有三个元素都向左浮动。内容被父级隐藏，但是包装它们的容器正在扩展“隐藏”子级的整个宽度。在除 Safari 之外的所有浏览器中都运行良好，我不知道为什么。

总结：宽度：0px；和溢出：隐藏；在 Safari 中不起作用

<html>
<head>
<title></title>
<style type="text/css">
   #container {background: rgba(0,0,255,1); float: left;}
   #block {width: 0px; background: rgba(255,0,0,0.50); float: left; overflow: hidden;}
   #content {width: 300px; height: 80px; background: rgba(0,255,0,0.50);}
</style>
</head>
<body>
<div id="container">
   <div id="block">
      <div id="content"></div>
   </div>
</div>
</body>
</html>

【问题讨论】：

将上面的块复制并粘贴到一个html页面中。在 Safari、Chrome 和 Firefox 中查看该页面。您会在 Safari 中看到一个 300x80 的蓝色矩形，但在 Chrome 或 Firefox 中看不到。

标签： html css safari

【解决方案1】：

某些显示值似乎是 Safari 中发生错误的地方。

经过大量试验和错误，似乎一个好的解决方案可能是将max-width 设置为与width 相同。请记住，如果您为width 设置动画，则需要在动画发生时将max-width 设置为允许width 临时扩展的值（可能是auto）。

阅读下面的各种 CSS cmets 以了解有关此问题的更多信息。

HTML：

<div id="container">
  <div id="block">
    sfdklhgfdlkbgjhdlkjdhbgflkjbhgflkdfgid
  </div>
</div>

CSS：

#container {
  flex: 0 0 auto;
  background: red;
  /* BUG: Certain display values seem to be where the bug happens, if display was just inline here, there would be no issue. */
  display: inline-flex;
  overflow: hidden;
  border: dotted 2px green;
}

#block {
  width: 0;
  /* height: 0; Setting height to 0 simply creates the illusion that width is fixed. If you look at the border, the width is still there, so height 0 does not help. */
  background: blue;
  /* BUG: Certain display values seem to be where the bug happens, if you don't need this, change it. */
  display: inline-flex;
  overflow: hidden;
  /* Has no practical effect here. */
  text-overflow: clip;
  /* font-size: 0; still keeps a little bit of width and can spoil the look of animating the width open from 0. */
  /* margin-right: -100vw; is a nasty hack that totally works but is bad for animating margins. */
  /* BEST FIX: Setting this property to the same as width may be the best way to fix the issue. */
  max-width: 0;
}

运行示例：https://jsfiddle.net/resistdesign/k0b5s4p7

【讨论】：

【解决方案2】：

如果您在该 div 中显示文本。然后，您应该尝试将字体大小归零。

.class{
 font-size:0;
 }

或者使用文本缩进

.class{ 文本缩进：-999px }

【讨论】：

我没有呈现文字。如果您看一下上面的示例，Safari 基本上禁用了溢出：隐藏；如果元素的宽度为 0，则在元素上。
@deathtrap 这是 Safari 错误。如果上述选项对您有用，那很好。除此之外，我不能提供太多东西，因为我是一个 PC 人，不会打扰太多的 safari。

【解决方案3】：

如果您还在#block 上设置height: 0;，您的问题将得到解决。不知道为什么会这样：/

【讨论】：