Question

在野生动物园中过渡div高度时遇到困难。在FF，Chrome和IE中看起来很棒。它最初可以转换为ok（它有缺陷），但它会以相反的方式转换为缩回。

div从高度开始：0并转换到高度：悬停时为115px。它转换回0但不是从底部长大的顶部。顶部保持在扩展位置，底部收缩以满足它。

还有一件事，它是一个无序列表，每个li都有转换。这个错误似乎只发生在最后一次徘徊在li上。

这是测试网站。有问题的是六个帖子：＃/ p>

http://iwanttolisten.in/pctest

正在使用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(); ?>,&nbsp;<?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>

Answer 1

解决！这与页面上的嵌入式Vimeo视频发生冲突。

登录页面具有相同的代码但没有其下的所有其他登录页面元素，我注意到登录后问题仍未存在。登录页面上有很多元素但我刚刚使用了检查员显示：在我找出冲突的位置之前都没有。

使用Safari的导航菜单转换也存在轻微问题，这也是值得的。这也是由此修复的。

将使用链接图片替换视频。甜！

Safari定位搞乱过渡

1 个答案: