Html <；李>；浮动在绝对定位框IE8及以下的元件

示例页面：问题在于照片下方的方框，在大多数浏览器中显示为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 mixin，如下所示：

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中进行测试，我只能在哪些元素需要更多的布局设置才能正确渲染上进行反复试验，所以我想我可能会看看以前使用过这种技术的人是否知道如何解决这个问题。

事实上，我相信问题出在您使用的第n个孩子身上。IE8不支持它

然而，它在IE8和IE9中的JSFIDLE中似乎运行良好

---

经过进一步讨论，我们发现存在一些导致布局问题的元素。IE不如其他浏览器宽容，因此出现了一些问题。在这里的验证中可以看到错误：

这是正确的，但是它会导致元素持续浮动到容器的大小，而不是完全停止浮动。我本想在这个问题上解决第n个child，但首先解决的是非浮动问题。然而，它怎么会在IE8和IE9上的JSFIDLE中工作呢？所有的CSS基本上仍然存在。将整个网站HTML（相同的CSS）复制并粘贴到其中会复制错误，这表明另一个元素正在干扰。可能是一些不可靠的标记？-它没有验证，并且有75个错误：/好吧，看看这个，确实如此。我习惯于验证程序之外的问题，但这可能是正确的；这75个错误中的大多数都来自一个未关闭的错误，该错误通过网络传播。