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

Question

以下代码演示了一个元素 ，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

Answer 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/

谁能更好？

Answer 2

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

如果你设置a { display: inline; }它工作。http://jsfiddle.net/2t388/