Question

我在这里工作的页面是body标签内部的骨架：

<div id="site-nav-container">
    <nav id="page-navigation"></nav>
</div>
<header id="site-header"></header>
<div class="content-container clearFix">
    <section id="blog-post-sum"></section>
    <aside id="site-sidebar"></aside>
</div>
<footer id="site-footer"></footer>

所以这就是我所面对的：为了造型目的，我不得不将 ＆＃34; blog-post-sum＆＃34; id的部分浮动到向左移动并将浮动放在一边，右侧为 ＆＃34; site-sidebar＆＃34; 。为了防止边缘崩溃，我将section和aside标签包装在div容器中并为其提供了 ＆＃34; clearFix＆＃34; 类，以便我可以使用清除-fix方法。我使用的方法如下：

.clearFix:before, .clearFix:after {
    content: "";
    display: table;
}
.clearFix:after {
    clear: both;
}
<!--[if  lt IE 8]>
/*For IE < 8(trigger hasLayout)*/
.clearFix {
    zoom: 1;
}
<![endif]-->

它就像一个魅力，但问题是如果我尝试将此方法放在我的css文件的请求中，那么样式规则就在明确的Fix方法中断之后。就这样！所以请帮我找出解决这个问题的解决方案。

Answer 1

你的CSS中有无效的评论：

<!--[if  lt IE 8]>
...
<![endif]-->

这是对HTML文件的评论。它不会在您的CSS文件中工作。

您可以将整个评论块移动到HTML文件中（不推荐），也可以考虑使用其他方式定位少于ie8的浏览器。以下是boilerplate直到最近处理此问题的方法（在您的HTML文件中，用此替换<html>标记）：

<!--[if lt IE 7]> <html class="lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]-->
<!--[if IE 7]> <html class="lt-ie9 lt-ie8 ie7" lang="en"> <![endif]-->
<!--[if IE 8]> <html class="lt-ie9 ie" lang="en"> <![endif]-->
<!--[if IE 9 ]> <html class="ie9" lang="en"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--><html lang="en"> <!--<![endif]-->

这会在指示浏览器的HTML标记中添加一个类。然后你可以像这样在你的CSS中定位它：

.lt-ie8 .clearFix {
    zoom: 1;
}

当我尝试应用清晰的修复方法时，为什么我的样式会破碎？

1 个答案: