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中显示的 in Chrome

以下是它在IE中的显示方式 in 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替换部分

部分和小标签的Css在IE和Chrome中是不同的

1 个答案: