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;
}

我创建了一个小提琴，可以在这里找到。

这是工作小提琴全屏输出。要查看正确的结果，请将其粘贴到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>

Answer 2

尝试在下面添加代码以防止字符串换行到另一行：

span.links a
{
    white-space: nowrap;
}

Answer 3

试试这个：

span.links {
    display: inline-block;
    height: 100%;
    margin: 0 auto;
    top: 10px;
    position: relative;
    width: 100%;
    text-align: center;
}

js小提琴

因为您为 span.links 设置了width.我删除并给了它100% width和text-align: center，也display: inline-block.现在它适用于所有主要浏览器，例如Chrome或FF。