0

我的 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

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

4

2 回答 2

0

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

将您的#image-logo 顶部样式更改为 60 像素而不是 80 像素

于 2012-10-16T16:07:09.690 回答
0

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

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

的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/

希望这可以帮助。

快速解决

您是否尝试过删除并在(60px + 20px)margin: 20px 0 0 0;上添加它的值？top: 80px;

于 2014-02-21T17:13:08.593 回答