Question

我正在使用css来缩放此页面上的元素，并且由于一些奇怪的原因，它正在移动并拉伸Chrome中元素内的图像。在Safari中工作得很好。

HTML

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset=utf-8 />  
        <title>title</title>
        <script type='text/javascript' src='http://code.jquery.com/jquery-1.6.2.js'></script>
        <script type='text/javascript' src='http://cherne.net/brian/resources/jquery.hoverIntent.js'></script>  
    </head>
<body>
    <div id="posts_container">
        <div class="post">
        <div class="post_content">
            <img src="http://25.media.tumblr.com/tumblr_m5e4ioVQsj1qbzzgco1_1280.gif" alt="" />
            <div class="post_tools">
                <a href="#" class="tag">Source: noirlac</a>
                <a href="#" class="tag">#gif</a>
            </div>
        </div>
        <div class="post_info">
            <div class="portrait"></div>
                <div class="from">
                    <a href="#">robotoperator</a>
                    <div class="reblogged"></div>
                    <a href="#">ary</a>
                </div>
                <div class="scale">
                    <a href="#" class="likes"></a>
                    <a href="#" class="reblog"></a>
                    <a href="#" class="note_count">1,747</a>    
                </div>
        </div>
        <img class="point" src="point.png" alt="" />
    </div>

    <div class="post">
        <div class="post_content">
            <h2>Where's my sandwich?</h2>
            <p>Seriously, where is it?</p>
            <div class="post_tools">
                <a href="#" class="tag">#where are you sandwich?</a>
            </div>
        </div>
        <img class="point" src="point.png" alt="" />
        <div class="post_info">
            <div class="portrait"></div>
                <div class="from">
                    <a href="#">robotoperator</a>   
                </div>
                <div class="scale">
                    <a href="#" class="likes"></a>
                    <a href="#" class="reblog"></a>
                    <a href="#" class="note_count">5</a>    
                </div>
        </div>
    </div>  

    <div class="post">
        <div class="post_content">
            <iframe src="https://embed.spotify.com/?uri=spotify:track:2dam1YcpllKLaeIunQvIrV" width="640" height="720" frameborder="0" allowtransparency="true"></iframe>
            <div class="post_tools">
                <a href="#" class="tag">Source: Spotify</a>
                <a href="#" class="tag">#music</a>
            </div>
        </div>
        <div class="post_info">
            <div class="portrait"></div>
                <div class="from">
                    <a href="#">robotoperator</a>
                    <div class="reblogged"></div>
                    <a href="#">anamanaguchi</a>
                </div>
                <div class="scale">
                    <a href="#" class="likes"></a>
                    <a href="#" class="reblog"></a>
                    <a href="#" class="note_count">12</a>   
                </div>  
        </div>
        <img class="point" src="point.png" alt="" />
        </div>  

    </div>
</body>
</html>

CSS

body {
    margin: 0px;
    padding: 0px;
    background: #2c4762;
}

#posts_container {
    position: absolute;
    width: 664px;
    margin: 120px 0px 0px -332px;
    padding: 0px 0px 120px 0px;
    left: 50%;
    top: 0px;
    overflow: hidden;
}

.post {
    width: 662px;
    margin-bottom: -50px;
    z-index: 2;
    position: relative;
    font-family: helvetica neue, sans-serif;
}

    .post_content {
        -webkit-box-shadow: 0 1px 5px rgba(0,0,0,.46);
        -moz-box-shadow: 0 1px 5px rgba(0,0,0,.46);
        box-shadow: 0 1px 5px rgba(0,0,0,.46);
        -webkit-border-radius: 8px;
        -moz-border-radius: 8px;
        border-radius: 8px;
        background: #fff;
        padding: 5px 15px 15px 15px;
    }

        .post_content iframe {
            margin: 6px 0px -10px -4px;
        }

        .post_content img {
            margin: 1px 0px -10px -4px;
            padding: 6px 0px 0px 0px;
            width: 639px;
        }

        .post_content h2 {
            color: #444;
            margin: 15px 0px 0px 0px;
        }

        .post_content p {
            margin: 10px 0px 0px 0px;
            font-size: 14px;
            line-height: 19px;
        }

            .post_content p a {
                color: #111;
            }

        .post_content blockquote {
            font-size: 14px;
            border-left: #ddd 3px solid;
            margin: 10px 0px 0px 20px;
            padding: 0px 0px 0px 20px;
        }

.post_tools {
    border-top: #d7d7d7 1px solid;
    margin: 20px 0px -15px -15px;
    padding: 10px 0px 0px 0px;
    height: 30px;
    width: 662px;
    background: #eee;
    -webkit-border-bottom-right-radius: 8px;
    -webkit-border-bottom-left-radius: 8px;
    -moz-border-radius-bottomright: 8px;
    -moz-border-radius-bottomleft: 8px;
    border-bottom-right-radius: 8px;
    border-bottom-left-radius: 8px;
}

    .post_tools .tag {
        font-family: 'Lucida Grande', Verdana, sans-serif;
        display: inline;
        padding: 0px 0px 0px 12px;
        font-size: 12px;
        color: #898989;
        text-decoration: none;
    }

        .post_tools .tag:hover {
            text-decoration: underline;
        }

.post_info {
    -webkit-transform-style: preserve-3d;
    position: relative;
    z-index: -1;
    opacity: 0;
    margin: -64px 0px 0px 0px;
    padding: 30px;
}

    .post_info a {
        color: #b2bbc4;
        text-decoration: none;
    }   

    .note_count, .reblog, .likes {
        -webkit-border-radius: 3px;
        -moz-border-radius: 3px;
        border-radius: 3px;
        display: inline;
        float: right;
        margin: 0px 0px 0px 20px;
    }   


    .post_info .note_count {
        padding: 3px 4px 3px 4px;
        font-size: 16px;
        font-weight: bold;
        background: #405971;
    }

    .post_info .reblog {
        display: block;
        width: 31px;
        height: 26px;
        background: #405971 url('tool_sprite.png') no-repeat -53px 2px;
    }

    .post_info .likes {
        display: block;
        width: 28px;
        height: 26px;
        background: #405971 url('tool_sprite.png') no-repeat -86px 4px;
    }

    .post_info .portrait {
        background: url('avatar.png');
        -webkit-border-radius: 6px;
        -moz-border-radius: 6px;
        border-radius: 6px;
        width: 64px;
        height: 64px;
        -webkit-box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.2);
        -moz-box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.2);
        box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.2);
    }

.point { 
    position: absolute;
    bottom: 104px;
    left: 50px;
    opacity: 0;
}

.from {
    position: absolute;
    top: 52px;
    left: 110px;
    height: 21px;
    width: 300px;
}

.reblogged {
    width: 25px;
    height: 21px;
    background: url('tool_sprite.png') no-repeat -56px 0px;
    margin: 0px 10px 0px 10px;
}

.from a, .reblogged {
    display: inline;
    float: left;
    font-weight: bold;
}

.scale {
    position: absolute;
    top: 50px;
    right: 10px;
    width: 300px;
    height: 26px;
    -webkit-transform: scale(0.8,0.8);
    -webkit-transform-style: preserve-3d;
}

JAVASCRIPT

$(document).ready(function() {
    $('.post').hoverIntent( function() {
        $('.post_info', this).delay(500).animate({ 'opacity': '1', 'margin-top': '-10px' }, 300);
        $(this).delay(500).animate({ 'margin-bottom': '-10px' }, 300);
        $('.point', this).delay(720).animate({'opacity': '1'}, 100);
    }, function () {
        $('.post_info', this).delay(500).animate({'opacity': '0', 'margin-top': '-50px' }, 300);
        $(this).delay(500).animate({ 'margin-bottom': '-64px' }, 300);
        $('.point', this).delay(500).animate({'opacity': '0'}, 100);
    });     
});

正在缩放的内容是悬停在每个帖子底部右侧的三个帖子控件。

如何解决此问题？

（请注意使用添加的jsfiddle进行编辑不会显示错误 - 您需要查看链接页面以查看其中的操作）

Answer 1

只需将.scale css规则更改为以下内容。

HTML：

<a href="#" class="likes">
    <span></span>
</a>

CSS：

.scale {
    position: absolute;
    top: 50px;
    right: 10px;
    width: 300px;
    height: 26px;
 }
 .post_info .likes {
     display: block;
     /* remove all other rules from here and assign to span */
 }
 .scale a span {
     display: block;
     width: 28px;
     height: 26px;
     background: #405971 url('http://ra.gs/tumblr/tool_sprite.png') no-repeat -86px 4px;
    -webkit-transform: scale(0.8);
 }

css变换规模和jquery bug

1 个答案: