Question

我猜这个例子非常简单，我不知道，为什么div首先缩小，然后弹出正确的高度。

这是示例代码

<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; }

这是一个小提琴链接，内容为：http://jsfiddle.net/3G7vG/

我在我的linux机箱上使用Chrome版本31.0.1650.63 Debian jessie / sid（238485）进行测试

Answer 1

height:auto不支持作为css3过渡的一部分。

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

http://jsfiddle.net/LefQV/

Answer 2

因为您将div.abs的高度设置为40px

height: 40px;

将其更改为自动

 height:auto;

完整的风格是

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

Answer 3

尝试将此作为你的css：

.block {
position: absolute;
height: 250px;
width: 250px;
transition:all 1s;
-moz-transition:all 1s;
-o-transition:all 1s;
-webkit-transition:all 1s;
overflow:hidden;}
.abs {
position: absolute;
height: 40px;
width: 200px;
background-color: yellow;
overflow: hidden;
transition:all 1s;
-moz-transition:all 1s;
-o-transition:all 1s;
-webkit-transition:all 1s;}
.abs:hover {  height: 100%; }

try this

绝对定位div上的css3高度转换到溢出自动失败

3 个答案: