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 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;
        }
    }
}

最后它在 a 内，应用了以下内容：

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

实际上-我相信问题出在您正在使用的 nth-child 上。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=% 28检测+自动%29&doctype=内联&group=0

于 2012-09-24T23:29:31.627 回答