0

CSS ロゴの配置に問題があります。私のサイトは : http://www.askjansen.co.cc 問題は、ブラウザ (chrome、safari など) とスマートフォン ブラウザ (iPhone) で開いたときに、ヘッダー ロゴが正常に表示されることです。しかし、blackberry ブラウザーで開いた場合、画像がうまく配置されません。

以下は私の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]

以下は、blackberry のブラウザーからの画像です (ロゴの位置が異なることに注意してください) : http://i.stack.imgur.com/CVdaG.jpg

これを解決するには？ありがとう！

4

2 に答える 2

0

コードを実際に最適化してきれいにすることができます。これにより、(理論的には) バグの発生が減少します。

ロゴはスタイルではなくコンテンツであるため、ロゴを<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) に追加しようとしましたか?

于 2014-02-21T17:13:08.593 に答える
0

私は今それを見ていますが、私が試したすべてのブラウザでオフになっています: Firefox、Safari、IE。

#image-logo a top スタイルを 80px ではなく 60px に変更します

于 2012-10-16T16:07:09.690 に答える