3

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

摘要：宽度：0px；和溢出：隐藏；在野生动物园中不起作用

<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>
4

3 回答 3

4

某些显示值似乎是 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

于 2019-01-19T15:10:36.423 回答
0

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

.class{
 font-size:0;
 }

或使用文本缩进

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

于 2013-10-18T14:37:04.113 回答
0

如果你也设置height: 0;上#block你的问题就会得到解决。不知道为什么会这样：/

于 2013-10-21T10:22:11.007 回答