0

これが実際に動作していることを確認するページの例：http ：//sturents.com/student-accommodation/Durham/house/34-young%20street/865-問題は写真の下のボックスにあり、ほとんどの場合9x9グリッドとして表示されますブラウザですが、IE8ではわずかにオフセットされた垂直リストとして。

次の（SASS）コードが使用されます。

 div.facilities {
    clear: both; overflow: hidden;
    ul {
        margin: 15px 0 0;
    }
    @include facilitiesForm;
    label {
        title { text-indent: -99999em;}
        &:hover, &:active, &:focus {
            span {
                background-position: $facilitiesFormBgPos;
            }
        }
        &.sel span {
            background-position:  top left;
        }
    }
}

次のように@facilitiesFormミックスインを使用します。

ul {
    list-style: none;
}
li {
    float: left; margin: 0 11px 11px 11px;
    &:nth-child(3n+1) {
        clear: left;
    }
}
label {
    display: block; width: 90px;
    text-align: center;
    span {
        height: 60px; width: 60px; display: inline-block;
        background-repeat: no-repeat; background-position: $facilitiesFormBgPos;
                   /* one bg-image rule for each icon */
    }
    &:hover, &:active, &:focus, &.sel {
        span {
            background-position: left top;
        }
    }
}

最後に、次のように適用された内部にあります。

div.centre-hack {
overflow: hidden;
> div {
    float: left; position: relative; left: 50%;
    > * {
        float: left; position: relative; left: -50%;
    }
}
}

問題の原因となっているのは、CSSの最後の部分であり、柔軟な親のある側ではなく、3x3のフロートアイコンのボックスを中央に配置する「センターハック」だと思います。ただし、IEでテストするための便利なコンソールがないため、正しくレンダリングするためにどの要素にさらにレイアウト設定が必要かについて試行錯誤を繰り返しているので、以前にこの手法を使用したことがある人が解決方法を知っているかどうかを確認するかもしれません。

4

1 に答える 1

1

実際、問題はあなたが使用しているn番目の子にあると思います。IE8はそれをサポートしていません。

http://reference.sitepoint.com/css/pseudoclass-nthchild

ただし、IE8および9のjsfiddleでは正常に機能しているようです... http：//jsfiddle.net/NDxT7/

さらに話し合ってみると、レイアウトに問題を引き起こす要素がいくつかあることがわかりました。IEは他のブラウザよりも寛容ではなかったため、いくつかの問題が発生しました。エラーは、ここの検証で確認できます：http: //validator.w3.org/check?uri=http%3A%2F%2Fsturents.com%2Fstudent-accommodation%2FDurham%2Fhouse%2F34-young%2520street%2F865&charset=% 28detect +automatically％29＆doctype = Inline＆group = 0

于 2012-09-24T23:29:31.627 に答える