如何让我的负上边距在桌面Safari中保持一致？

Question

我为我的网站的徽标添加了一个负余量，并且在我已经测试过的所有浏览器中看起来都很好。见这里：

问题是它无法在Safari桌面上正常显示。见这里：

HTML如下：

<hgroup id="logo_container">
    <div id="logo_inside_container">
        <h1 id="site-title"><a href="<?php echo esc_url( home_url( '/' ) ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home"><img src="/wp-content/uploads/logo.png" alt="612 Vineyard - Berryville, VA"/></a></h1>
    </div>
</hgroup>

CSS如下：

#site-title {
margin-top: -30px;
display: block;
padding: 0;
width: 190px;
height: 143px;
float: left;
}
#site-title img {
    width: 190px;
    height: 143px;
}
#logo_container {
    display: block;
    width: 100%;
    height: 100%;
    margin: -29px 0 0 !important;
    background: url('/wp-content/uploads/logo_stripe_bg.png') 0 41px repeat-x;
}
#logo_inside_container {
    display: block;
    width: 860px;
    height: 143px;
    margin: 0 auto;
    background: url('/wp-content/uploads/logo_stripe.png') 0 41px no-repeat;
}

Answer 1

我找到了一种在我的body类中添加浏览器特定类的方法：http://codebyte.dev7studios.com/post/4180628671/add-browser-to-body-class-in-wordpress

简单地改变了#site-title {margin-top：-30px; to .safari＃site-title {margin-top：0; }

希望这有助于某人！