`overflow-x: hidden` 中的元素仍然有宽度（Safari）答案

【问题标题】：Elements inside `overflow-x: hidden` still have width (Safari)`overflow-x: hidden` 中的元素仍然有宽度（Safari）
【发布时间】：2012-11-13 22:16:35
【问题描述】：

下面的代码演示了一个元素p，它通过 CSS3（实际上是 webkit）转换水平折叠和展开：

<style>
  div * {
    display: inline-block;
  }

  p {
    overflow-x: hidden;
    white-space: nowrap;
    -webkit-transition: width 1s;
  }
</style>

<div>
  <a><i>begin</i><p><s>middle</s></p><b>end</b></a>
  <a id="after">after</a>
</div>

<script>
  $('div > a').each(function() {
    var a, p;
    a = $(this);
    p = $('p', a);
    a.toggle((function() {
      p.width(0);
    }), function() {
      p.width(p[0].scrollWidth);
    });
  });
</script>

http://jsfiddle.net/qrf3E/

在使用 Chrome 时达到了预期的效果： http://www.screenr.com/vJH7

但在 Safari（桌面版和移动版）中，容器元素 a 的表观宽度会在内部容器 p 折叠时迅速恢复到展开后的宽度。这会强制以下元素#after 在空间中漂浮... 帮助！这是 Safari 的错误吗？谁能提供解决办法？

http://www.screenr.com/qJH7

【问题讨论】：

标签： jquery css safari overflow

【解决方案1】：

我刚刚想到的一个可能的解决方法是折叠到一个像素然后隐藏：

a.toggle(function() {
  p.one('webkitTransitionEnd', function() {
    p.hide();
  });
  p.width(1);
}, function() {
  p.show();
  p.width(p[0].scrollWidth);
});

http://jsfiddle.net/corin/LsSk2/

谁能做得更好？

【讨论】：

【解决方案2】：

嗯，这似乎是 safari 开发人员忘记的默认值。

如果您设置a { display: inline; }，它会起作用。 http://jsfiddle.net/2t388/

【讨论】：

谢谢！我将在我遇到这个问题的现实世界项目中尝试它，看看它是否有效