css转换比例和jQuery的bug

我使用CSS来缩放此页面上的一个元素，出于一些奇怪的原因，它在Chrome中移动和拉伸元素内的图像。在Safari中完美运行。css转换比例和jQuery的bug

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编辑没有显示出错误 - 你需要查看链接页面，看看它在行动）

来源

2013-03-02 Ryan

如果您要设置动画的'不透明度：.999'，而不是'不透明度：1'它看起来好多了，但仍有2像素的顶端看起来不太正确。 – 2013-03-02 18:38:38

只要改变你的.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); 
}

来源

2013-03-02 18:34:38 Ehtesham

问题仍然存在。 Chrome在Windows 8上。 – 2013-03-02 18:36:11

已更新。这对我有用。 – Ehtesham 2013-03-02 18:51:38

好吧我做了更改 - 事实证明问题与应用的边界半径有关？如果您在更新的页面上取消注释掉最后一位css，则问题会返回 – Ryan 2013-03-02 19:11:12

回答

相关问题