0
사파리에서 div 높이를 전환하는 데 어려움이 있습니다. FF, Chrome 및 IE에서 멋지게 보입니다. 처음에는 ok로 전환 할 수 있지만 (버그가 있음) 반대 방향으로 다시 축소됩니다.사파리 포지셔닝 전환으로 뒤죽박죽
div는 높이 : 0에서 시작하여 마우스 오버시 높이 : 115px로 전환됩니다. 그것은 다시 0으로 천이하지만 꼭대기는 바닥에서 위로 자랍니다. 상단은 확장 된 위치에 있으며 하단은 축소 된 위치에 도달합니다.
한 가지 더, 그것은 순서가 지정되지 않은 목록이며 각 전환에 있습니다. 그 오류는 오직 마지막으로 위에 엎드려지면서 일어난 것처럼 보입니다.
여기 테스트 사이트가 있습니다. 문제의 리튬의는 여섯 개 포스트 티저 상자입니다
는 CSS 전환을 사용했지만 지금은 문제를 해결하는 것입니다 있는지 확인하기 위해 JQuery와로 전환. 부모 요소의 position 속성과 관련이 있는지 궁금합니다. 여기에 코드가 있습니다. 거기에 몇 가지 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>