1

在 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>
4

1 回答 1

1

您可以在 head 部分中使用此脚本：

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

IE 8< 无法识别该section元素。问题是浏览器对它们根本无法识别的标签进行了特殊处理。诸如应用样式和能够包含子项之类的基本内容将不起作用。

于 2012-07-22T16:45:43.840 回答