IE和Chrome中的section和小标签的CSS有所不同

Question

我有这个html显示人员列表，它包含名称和状态。

<section class="box-time">
    <ul class="group">
        <li>
            <a class="fancybox fancybox.ajax" href="../loadFancybox.php">
                <span class="info">
                    <strong>Name</strong>
                    <small>
                        <p id="pStatus" class="colorRed">Pending</p>
                    </small>
                </span>
            </a>
        </li>
    </ul>
</section>

这是我正在使用的CSS

ul.group li {
    border: 1px transparent solid;
    float: left;        /*  added  */
    min-width: 232px;   /*  added  */
}

section.box-time li:hover{

    background-color:#9495A8
}

section.box-time li a{
    margin:0 10px;
    padding:15px 10px;
    display:inline-block;
    *display:inline;
    *zoom:1;
    color:#444;

}
section.box-time span.info{
    display:inline-block;
    *display:inline;
    *zoom:1;
    margin-left:5px;
    width:185px;
    max-height:45px;
    vertical-align:middle;
    white-space:normal
}

section.box-time span.info small {

    font:11px/1em Arial,sans-serif;
    font-weight: bolder;
    margin-top: 5px;
}

section.box-time span.info small p.colorRed{
    color:red;
}

section.box-time span.info small p.colorBlue{
    color:blue;
}

section.box-time span.info small p.colorGreen{
    color:green;
}

问题在于它们在IE中是不同的（令人惊讶的是吧？）。

这是在chrome中显示的方式

这是它在IE中的显示方式

我还创建了一个小提琴： https : //jsfiddle.net/083krhau/

我需要更改以使该html在两个浏览器中看起来相同吗？

Answer 1

我假设您使用的是IE的旧版本，这对我来说就是我可以复制问题的方式。 旧版本不支持html5。 您可以将其包含在网站的顶部：

<!--[if lt IE 9]>
    <script>
        document.createElement('header');
        document.createElement('nav');
        document.createElement('section');
        document.createElement('article');
        document.createElement('aside');
        document.createElement('footer');
    </script>
<![endif]-->

这将告诉他们这些标记也是html标记。 最好删除不使用的标签

另一个解决方案是用div替换该部分