Question

我遇到了我认为是Safari中的一个错误，并且想知道是否有人能够阐明为什么会出现这种结果。我在下面列出了一个非常简单的例子，但基本上我的问题是这个。我有一个宽度为300像素，高度为80像素的子元素，我有一个嵌套在宽度为0px的父级中的子元素和一个隐藏的溢出。这两个元素包装在一个没有设置宽度的容器中，所有三个元素都向左浮动。内容被父级隐藏，但是将它们包装起来的容器都扩展了“隐藏”子级的整个宽度。除了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>

Answer 1

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

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

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

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

Answer 2

如果你在该div内的presentnig文本。然后，你应该尝试将字体大小归零。

.class{
 font-size:0;
 }

或使用text-indent

的.class { text-indent：-999px }

Answer 3

如果您还在height: 0;设置了#block，那么您的问题就会得到解决。不知道为什么会发生这种情况：/

在safari中css width 0和溢出隐藏的问题

3 个答案:

HTML：

CSS：