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 bug吗？任何人都可以提供修复吗？

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

嗯，这似乎是狩猎开发者遗忘的默认值。

如果设置a { display: inline; }则可行。 http://jsfiddle.net/2t388/

`overflow-x：hidden`里面的元素仍有宽度（Safari）

2 个答案: