html - Safari 中的过渡有问题

Question

我发现了一个奇怪的错误。 我需要在一个盒子上做一个过渡宽度/高度，我需要这个盒子是绝对的和内联 block 。 这适用于除 safari 之外的所有浏览器。

这是一个例子:http://jsfiddle.net/575FE/

HTML:

<div id="block">
SOME TEXT
</div>

CSS:

#block {
    height: 200px;
    width: 200px;
    background-color: yellow;
    -moz-transition: 0.6s all;
    -webkit-transition: 0.6s all;
    -o-transition: 0.6s all;
    transition: 0.6s all;
    display: inline-block;
}

#block:hover {
    height: 400px;
    width: 400px;
    background-color: blue;
    position: absolute;
}

inline-block + absolute 的组合使过渡在 safari 中不起作用。 谁知道怎么修它 ？ 谢谢。

Answer 1

从 #block:hover 中移除 position:absolute

Updated DEMO

#block:hover {
    height: 400px;
    width: 400px;
    background-color: blue;
}