Html 图像徽标在移动设备和浏览器之间的位置不同

我的CSS徽标定位有问题。 我的网站是： 问题是，当我用我的浏览器（如chrome、safari等）和智能手机浏览器（iPhone）打开它时，页眉的徽标很好。但是，如果我用黑莓浏览器打开它，图像就没有很好地对齐

下面是我的HTML语法：

<h1 class="logo" id="image-logo">       
    <a style="background:url(http://askjansen.co.cc/wp-content/themes/Weekly/images/logo.png) no-repeat" href="http://askjansen.co.cc" title="Ask Jansen" rel="home">Ask Jansen <span class="desc">Good Nutrition is a Start</span></a>

    </h1>       

以下是黑莓浏览器的图片（请注意徽标上的不同位置）：

---

如何解决这个问题？谢谢大家!

我现在正在查看它，并且它在我尝试的每个浏览器上都关闭了：Firefox、Safari、IE

---

将#image logo a top style更改为60px而不是80px

您可以真正优化和清理代码，这将（理论上）减少bug的发生

将徽标设置为

标记而不是

更为正确，因为徽标是内容，而不是样式

HTML：

<a href="./" class="logo">
    <img src="path/to/logo.png" alt="Ask Jansen, Good nutrition is a Start" width="300" height="90">
</a>

有关标识为h1或图像的更多信息：

希望这有帮助

快速修复

---

您是否尝试删除

边距：20px 0

并将其值添加到

顶部：80px（60px+20px）？
不清楚“不同的位置”是什么意思，如果你试图让你的网站在每个移动浏览器上看起来都一样，你会让自己发疯。你必须使用
来包装图像吗？否则，为什么不将它（作为
）放入已经存在的
-在那里，您可以通过边距/填充来定位它：
标题img{margin://where；padding://where；}
，我对wordpress了解不多，所以没有办法让它在各种浏览器上看起来都一样？我已经尝试将它改为60像素，并且适合黑莓浏览器，但是chrome和iOS的safari浏览器上的外观也会升级。
<a href="./" class="logo">
    <img src="path/to/logo.png" alt="Ask Jansen, Good nutrition is a Start" width="300" height="90">
</a>

.logo {
    position: absolute;
    top: 100px;
    left: 0; }
.logo img {
    display: block; }