html - CSS 结果在浏览器中显示不同

Question

我正在编写一个包含一些数据的 HTML 页面。我试图对齐跨度中的内容。它在 chrome 中工作正常，但是当进入 FireFox 时，它显示不同。

HTML

<div class="header" id="header">
<span class="totalTime">Status: (Worked/Total) - 23/38</span>
<span class="effeciency">Effeciency : 15.05</span>
<span class="links">
   <span class="casesLink"><a href="index.jsp">Allocated Cases</a></span>
   <span class="reportsLinks"><a href="UsersCounts.jsp">User Counts</a></span></span>
</div>

CSS

.header {
    position: fixed;
    top: 0em;
    left: 0px;
    width: 100%;
    padding-bottom: 3em;
    border-bottom: 1px solid black;
    background: #ff8800;
    color: white;
    font-weight: bold;
}

span.totalTime {
    display: block;
    float: left;
    margin-left: 1.5em;
    position: absolute;
    top: 30px;
}

span.effeciency {
    display: block;
    float: right;
    width: auto;
    margin-right: 2em;
    top: 30px;
    position: relative;
}

span.links {
    display: flex;
    width: 200px;
    height: 100%;
    margin: 0 auto;
    top: 30px;
    position: relative;
}

.links>span {
    display: inline-table;
    padding: 1em;
    padding-bottom: 0em;
    padding-top: 0em;
}

我创建了一个 fiddle ，可以找到here .

这是工作 fiddle 全屏输出。要查看正确的结果，请将其粘贴到 Chrome 和 Firefox 浏览器中。

https://jsfiddle.net/pwg69xxu/1/embedded/result/

Answer 1

这是更新后的代码，现在您可以使用它而不会遇到问题:

<style>
body {
    margin: 0;
    padding: 0
}
.header {
    width: 100%;
    height: 55px;
    background: #ff8800;
    padding: 20 0;
    border-bottom: 1px solid #000;

}
.left {
    float: left;
    width: 31%;
    margin-left: 13px;
    font-weight:bold;
    color:#fff;
}
.right {
    float: right;
    width: 33%;
    margin-right: 13px;
    text-align: right;
    font-weight:bold;
    color:#fff;
}
.center {
    float: left;
    width: 32%;
}
.header ul {
    list-style: none;
    width: 300px;
    margin: 18px auto;
}
.header ul li {
    float: left;
    margin-right: 20px;
}
</style>
<div class="header">
<div class="left"><p>Status: (Worked/Total) - 23/38</p></div>
<div class="center">
<ul>
<li><a href="index.jsp">Allocated Cases</a></li>
<li><a href="UsersCounts.jsp">User Counts</a></li>
</ul>
</div>
<div class="right"><p>Effeciency : 15.05</p></div>
</div>