css3高度过渡在绝对定位的div上溢出自动失败

问题描述

这个例子是相当selfexplanatory我猜，我不知道，为什么div第一次收缩，而且弹出到正确的高度。

this example is pretty selfexplanatory i guess, and i have no idea, why the div first shrinks, and than pops to the right height.

这里是例子代码

<div class="block">
  <div class="abs">
    hover me!!<br/>
    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet
  </div>
</div>

和CSS

.block {
  position: relative;
  height: 500px;
  width: 500px;
}

.abs {
  position: absolute;
  height: 40px;
  width: 200px;
  background-color: yellow;
  overflow: hidden;
}

.abs:hover {  height: auto; transition: height 1s; }

这里是一个小提琴链接，内容如下：

and here is a fiddle link, with the content: http://jsfiddle.net/3G7vG/

我用chrome版本测试版本31.0.1650.63我的linux框上的Debian jessie / sid（238485）

i test this with the chromium release Version 31.0.1650.63 Debian jessie/sid (238485) on my linux box

推荐答案

height：auto 不支持作为css3中的转换的一部分。

height:auto is not support as part of a transition in css3.

您应该尝试 min-height ， max-height 或 transform （使用 scalex（aNumberBetweenZeroAndOne））

You should rather try min-height, max-height, or transform (using the scalex(aNumberBetweenZeroAndOne))

这篇关于css3高度过渡在绝对定位的div上溢出自动失败的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！