0

で区切られたアンカーがあり | ます。これはすべてdiv.linksWrapper.  | IE9では、 の直接の子孫であるテキスト (この場合は )div.linksWrapperは、他の要素の中心からオフセットされます。他のすべてのブラウザー | では、アンカーに合わせてレンダリングされます。

下の画像を参照してください...

ここに画像の説明を入力

html

<div class="instagramViewerWrapper">
    <div class="linksWrapper">
        <a class="active" href="#">VIEW ALL</a>&nbsp;|&nbsp;
        <a id="40020931" href="#" class="">KATHERINE</a>&nbsp;|&nbsp;
        <a id="40027696" href="#" class="">MELISSA</a>&nbsp;|&nbsp;
        <a id="42768724" href="#">MICHELE</a>&nbsp;|&nbsp;
        <a id="42764826" href="#">CAILEE</a>&nbsp;|&nbsp;
        <a id="42767242" href="#">CHRISTIE</a>&nbsp;|&nbsp;
        <a id="42763829" href="#">JAMIE</a></div>
    <div class="grid" id="instagramViewer">...</div>
</div>

CSS

html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, code, em, img, small, strike, strong, sub, sup, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
    background: none repeat scroll 0 0 transparent;
    border: 0 none;
    font-size: 100%;
    margin: 0;
    outline: 0 none;
    padding: 0;
    vertical-align: baseline;
}
.instagramViewerWrapper {
    color: #888888;
    margin-top: 30px;
    min-height: 1040px;
}
.instagramViewerWrapper .linksWrapper {
    position: relative;
    text-align: center;
}
.instagramViewerWrapper .linksWrapper a {
    color: #888888;
    display: inline-block;
    padding-bottom: 5px;
}
4

2 に答える 2

1

これは単にpadding-bottom: 5px;、アンカーに適用しているという事実が原因です（.instagramViewerWrapper .linksWrapper a）。どうやら他のブラウザはそれを無視しますが、IEは無視しません。

ルール宣言を移動してすべてを含める.instagramViewerWrapper .linksWrapperか、完全に削除します。

お役に立てば幸いです。

于 2012-09-04T15:51:17.350 に答える
1

のような非セマンティックなセパレータを使用する代わりに、次のよう&nbsp;|&nbsp;にすることができます。

.instagramViewerWrapper .linksWrapper a {
    color: #888888;
    display: inline-block;
    padding: 0 5px 5px;
    border-right: 1px solid #ccc;
}

これにより、リンクに境界線が描画されるため、リンクがテキストと整列し、コードもよりきれいになります。

于 2012-09-04T15:38:46.587 に答える