锚点按钮背景图像不能在Android股票浏览器上按预期显示。

时间:2014-02-08 17:14:53

标签: android html css

我有一些按钮在Chrome浏览器中显示正常,但在现有的Android浏览器上,图像看起来比它们小。

HTML

<div class="col-postSocial">
    <ul>
        <li><a class="fb" href="http://www.facebook.com/share.php?u=<?php the_permalink(); ?>"></a>
        </li>
        <li><a class="twit" href="http://twitter.com/share?url=<?php the_permalink(); ?>" target="_blank"></a>
        </li>
        <li><a class="ggl" href="https://plus.google.com/share?url=<?php the_permalink(); ?>"></a>
        </li>
        <li><a class="pin" href="http://pinterest.com/pin/create/link/?url=<?php the_permalink(); ?>" target="_blank"></a>
        </li>
    </ul>
</div>

CSS

.col-postSocial {
    width:100%;
    margin-top:20px;
    margin-bottom:10px;
    text-align:center;
    float:none;
}
.col-postSocial li {
    display:inline-block;
}
.col-postSocial a {
    display:block;
    height:50px;
    width:50px;
}
.fb {
background:url('../images/facebook.png') #3b5998;
}
.twit {
background:url('../images/twitter.png') no-repeat top #00aced;
}
.ggl { background:url('../images/google_plus.png') no-repeat top #dd4b39;
}
.pin {
background:url('../images/pinterest.png') no-repeat top #cb2027;
}

我不确定要在androids stock浏览器上做什么改变,肯定这应该可行吗?

图像是50 x 100px png,但在Android上,图像看起来更像是25 x 50px,盒子仍然是50x50所以造成这种情况的原因是什么?

1 个答案:

答案 0 :(得分:0)

啊,它只是想让我定义一个大小background-size:50px 100px!important;