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>