Question

在Firefox / Chrome / Opera / Etc上，这个CSS效果很好，3列是并排的。在IE上，列是垂直的，不是并排的。

对此有什么简单的修复/破解？谢谢！

<style>
.col1 {
    float: left;
    width: 270px;
    position: relative;
    padding: 15px;
    margin-bottom: 10px;
}

.col2 {
    float: left;
    width: 270px;
    position: relative;
    padding: 15px;
    margin-bottom: 10px;
    margin-left: 10px;
    margin-right: 10px;
}

.col3 {
    float: left;
    width: 270px;
    position: relative;
    padding: 15px;
    margin-bottom: 10px;
}
</style>

html：

   <body>
    <section class="col1">
        <p>Lorem Ipsum is simply dummy text of 
        the printing and typesetting industry.</p>
    </section>

    <section class="col2">
        <p>Lorem Ipsum is simply dummy text of 
        the printing and typesetting industry.</p>
    </section>

    <section class="col3">
        <p>Lorem Ipsum is simply dummy text of 
        the printing and typesetting industry.</p>
    </section>
    </body>

Answer 1

您可以在头部使用此脚本：

<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

IE 8＆lt;无法识别section元素。问题是浏览器对他们根本不认识的标签有特殊的处理方式;应用样式和能够包含子项的基本内容将无效。

IE不能正确显示3个浮动部分

1 个答案: