CSS 结果在浏览器中的显示方式不同答案

【问题标题】：CSS result displaying differently in browsersCSS 结果在浏览器中的显示方式不同
【发布时间】：2016-07-02 08:36:24
【问题描述】：

我正在编写一个 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;
}

我创建了一个小提琴，可以找到here。

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

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

【问题讨论】：

天哪！ Flex 与 inline-table 与浮点数混合......它的行为不同是正常的。您有一个宽度为 200 像素的 flex 项目。它不适合。 Chrome 缩小了内联表，但 Firefox 工作正常。只需为该元素添加更多宽度，它就可以工作（270 像素对于我的屏幕来说已经足够了）。但是，你必须学习布局以避免这种事情（flex + float + table，奇怪的方式）
您的代码有许多 css 错误代码，您可以减少 css 以设置您在 html 中的样式，如果您愿意，我可以为您制作 :)
嗨@ahmdabos，是的，这将非常有帮助。谢谢
嗨@MarcosPérezGude，我的坏，对不起。我在网上搜索并使用过。

标签： html css

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

试试这个：

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

jsFiddle

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

【讨论】：

【解决方案3】：

这是更新后的代码，现在您可以毫无问题地处理它：

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

【讨论】：