0
难以在Safari中转换div高度。在FF，Chrome和IE中看起来很棒。它最初可以转换成OK（它是越野车），但它会以相反的方式转换回缩。Safari定位与转换混乱
该div从高度开始：0，在悬停时转换为高度：115px。它转换回0，而不是从底部向上成长。顶部停留在扩展位置，底部缩小以满足它。
还有一件事，它是一个无序的列表，每个li上都有一个转换。这个错误似乎只发生在最后一次悬停在李上。
这里是测试网站。李的问题是六个职位传情盒：
使用CSS转换只不过现在切换到jQuery来看看是否能够解决问题。我想知道它是否与父元素上的位置属性有关。这是代码。有一些WordPress的复制在其中的代码片段。
<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>