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替換該部分