3

私は主に iPhone 向けのモバイル Web サイトをコーディングしています。画像に SVG を使用していますが、何らかの理由で一部の画像しか表示されません。

以下のスクリーンショットを見ると、アイコンが欠落していることがわかります。

ここに画像の説明を入力

https://mobile.hollat​​me.com/を見ると、実際のバグを見ることができます。上部にロゴが表示されていないことがわかります。ただし、 https://mobile.hollat​​me.com/css/svg/logo.svgのロゴ ファイルに直接移動し、ページに戻ると表示されます。

HTML :

<div class="profileItems">
    <a class="notificationsProfileItem" href="javascript:{}" data-loc="notifications">Notifications <span></span></a>
    <a class="neighborhoodsProfileItem" href="javascript:{}" data-loc="strolling">Strolling <span></span></a>
    <a class="streamProfileItem" href="javascript:{}" data-loc="stream">Stream <span></span></a>
    <a class="interestsProfileItem" href="javascript:{}" data-loc="interest-trends">Interest Trends <span></span></a>
    <a class="photosProfileItem" href="javascript:{}" data-loc="photos">Photos <span></span></a>
    <a class="shuffleProfileItem" href="javascript:{}" data-loc="shuffle">Shuffle Feeds <span></span></a>
    <a class="messagesProfileItem" href="javascript:{}" data-loc="messages">Messages <span></span></a>
    <a class="neighborsProfileItem" href="javascript:{}" data-loc="neighbors">Neighbors <span></span></a>
    <a class="friendsProfileItem" href="javascript:{}" data-loc="friends">Friends <span></span></a>
    <a class="settingsProfileItem" href="javascript:{}" data-loc="settings">Settings <span></span></a>
</div><!-- End profile items -->

CSS :

.profileItems {}

.profileItems a {
    display:block;
    background-color:#F2F2F2;
    margin:0 0 0.1em 0;
    padding:1.5em 1em 1.5em 2.8em;
    color:#595959;
    font-weight:bold;
    font-size:0.8em;
    opacity:0;
}

    .profileItems a span {
        display:block;
        background:url(svg/goArrow.svg) no-repeat;
        background-size:1em;
        float:right;
        height:1.5em;
        width:1em;
        margin:-0.1em 0 0 0;
    }

.shuffleProfileItem {
    background-image:url(svg/feeds.svg);
    background-repeat:no-repeat;
    background-size:1.8em;
    background-position:0.5em;
}

.notificationsProfileItem {
    background-image:url(svg/holla.svg);
    background-repeat:no-repeat;
    background-size:1.8em;
    background-position:0.5em;
}

.neighborhoodsProfileItem {
    background-image:url(svg/neighborhoods.svg);
    background-repeat:no-repeat;
    background-size:1.8em;
    background-position:0.5em;
}

.interestsProfileItem {
    background-image:url(svg/interests.svg);
    background-repeat:no-repeat;
    background-size:1.8em;
    background-position:0.5em;
}

.messagesProfileItem {
    background-image:url(svg/message.svg);
    background-repeat:no-repeat;
    background-size:1.8em;
    background-position:0.5em;
}

.photosProfileItem {
    background-image:url(svg/photo.svg);
    background-repeat:no-repeat;
    background-size:1.8em;
    background-position:0.5em;
}

.neighborsProfileItem {
    background-image:url(svg/neighbors.svg);
    background-repeat:no-repeat;
    background-size:1.8em;
    background-position:0.5em;
}

.friendsProfileItem {
    background-image:url(svg/friends.svg);
    background-repeat:no-repeat!important;
    background-size:1.8em;
    background-position:0.5em;
}

.settingsProfileItem {
    background-image:url(svg/settings.svg);
    background-repeat:no-repeat;
    background-size:1.8em;
    background-position:0.5em;
}
4

1 に答える 1