快速修复

Question

我的CSS徽标定位有问题。我的网站是：http://www.askjansen.co.cc 问题是，当我用我的浏览器（如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>

这是我的CSS语法：

    ![.logo {
    float: left;
}

.logo {
    margin: 20px 0px 0px 0px;
    font-family: Georgia,serif;
    font-size: 36px;
    font-weight: bold;
    line-height: 30px;
    text-transform: uppercase;
    letter-spacing: 0px;
}

.logo a {
    color: #333;
    display: block;
}

.logo a:hover {
    color: #333;
}

.logo .desc {
    display: block;
    font-family: Arial,serif;
    font-size: 11px;
    font-weight: normal;
    color: #aaa;
    letter-spacing: 0px;
    text-transform: none;
}

.logo a:hover .desc {
    color: #aaa;
}

#text-logo a {
    padding: 0 15px;
}

#image-logo {
    margin: 18px 0px 0px 15px;
}

#image-logo a {
    position:absolute;
    top: 80px;
    width: 300px;
    height: 90px;
    text-indent: -5555em;
    overflow: hidden;
}][1]

以下是黑莓浏览器的图片（注意徽标上的不同位置）： http://i.stack.imgur.com/CVdaG.jpg

如何解决这个问题？谢谢！

Answer 1

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

将您的＃image-logo更改为60px而不是80px

Answer 2

您可以真正优化和清理代码，这会（理论上）减少错误的发生。

将徽标设置为<img>标记而不是<h1>更为正确，因为徽标是内容，而不是样式。

HTML ：

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

CSS ：

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

有关徽标的更多信息，如h1或图片：http://csswizardry.com/2010/10/your-logo-is-an-image-not-a-h1/

希望这有帮助。

快速修复

您是否尝试删除margin: 20px 0 0 0;并在top: 80px;（60px + 20px）上添加其值？

Image Logo在移动设备和浏览器之间的位置不同

2 个答案:

快速修复