html - 部分和小标签的 css 在 IE 和 Chrome 中是不同的

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 中的显示方式

我还创建了一个 fiddle :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 替换该部分