在 safari 中转换 div 高度时遇到困难。在 FF、Chrome 和 IE 中看起来很棒。它最初可以过渡正常（这是错误的），但随后会以相反的方式过渡以收缩。
div 从 height: 0 开始，在悬停时过渡到 height: 115px。它转换回 0，但不是顶部从底部向上生长。顶部保持在展开位置，底部收缩以适应它。
还有一件事，它是一个无序列表，并且转换在每个 li 上。该错误似乎只发生在最后一次悬停在 li 上。
这里是测试站点。有问题的 li 是六个帖子预告框：
正在使用 css 转换，但现在切换到 jquery 以查看是否可以解决问题。我想知道它是否与父元素的位置属性有关。这是代码。里面复制了一些wordpress php片段。
<ul id="post_teasers">
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<li>
<div class="looped_post">
<div class="thumbnail_loop">
<?php the_post_thumbnail(); ?>
</div>
<div class="loop_content">
<div class="loop_title">
<div class="title_pad"><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php if ( function_exists('the_title_attribute')) the_title_attribute(); else the_title(); ?>"><?php limit_title($post->post_title, 24); ?></a></div>
<div class="teaser_meta">
<?php the_author(); ?>, <?php bp_profile_field_data( array('user_id'=>get_the_author_meta( 'ID' ),'field'=>'Neighborhood' )); ?>
</div>
</div>
<div class="post_expand">
<div class="loop_excerpt">
<?php the_excerpt(); ?>
</div>
</div>
</div>
</div>
</li>
<?php do_action( 'bp_after_blog_post' ); ?>
<?php endwhile; ?>
</ul>
.looped_post {
float: left;
height: 305px;
margin: 0 12px 25px;
overflow: hidden;
position: relative;
width: 255px;
}
.looped_post:after {
-moz-border-bottom-colors: none;
-moz-border-left-colors: none;
-moz-border-right-colors: none;
-moz-border-top-colors: none;
border-color: transparent #F2F1DF;
-webkit-border-image: none;
-moz-border-image: none;
border-image: none;
border-style: solid;
border-width: 20px 20px 0 0;
bottom: 0;
content: "";
display: block;
height: 0;
position: absolute;
right: 0;
width: 0;
z-index: 3;
}
.thumbnail_loop {
width: 255px;
height: 200px;
overflow: hidden;
}
.post_expand {
height: 0;
overflow: hidden;
/*
-webkit-transition: all 0.5s ease-out 0s;
-moz-transition: all 0.5s ease-out 0s;
-o-transition: all 0.5s ease-out 0s;
-ms-transition: all 0.5s ease-out 0s;
transition: all 0.5s ease-out 0s;
*/
}
/*
ul#post_teasers li:hover .post_expand {
height: 115px;
}
*/
.loop_content {
background-color: #FFFFFF;
border-top: 4px solid #8A7B67;
bottom: 0;
font-family: noto serif,serif;
position: absolute;
width: 255px;
z-index: 2;
}
.loop_title {
background: none repeat scroll 0 0 #FFFFFF;
height: 110px;
position: relative;
width: 255px;
}
.loop_title a {
color: #3E2711;
font-family: noto serif,serif;
font-size: 27px;
font-weight: normal;
line-height: 30px;
}
.title_pad {
margin-bottom: 0;
padding: 10px 10px 10px 20px;
}
.teaser_meta {
bottom: 15px;
color: #856A4F;
font-size: 14px;
font-style: italic;
padding: 0 0 0 20px;
position: absolute;
}
.loop_excerpt {
background: none repeat scroll 0 0 #FFFFFF;
color: #3E2711;
font-size: 14px;
height: 60px;
overflow: hidden;
padding: 0 20px 20px;
width: 215px;
}
.loop_excerpt p:first-child:first-letter {
float: left;
color: #9FA615;
font-size: 45px;
line-height: 20px;
padding-top: 4px;
padding-right: 0;
padding-left: 0;
font-family: Georgia;
}
<script type="text/javascript">
$(document).ready(function(){
$('ul#post_teasers li').hover(function(){
$(".post_expand", this).stop().animate({height:'115px'},{queue:false,duration:500});
}, function() {
$(".post_expand", this).stop().animate({height:'0px'},{queue:false,duration:500});
});
});
</script>