Html 浏览器之间用于内联子列表高亮显示的填充和行距不一致

如何使不同浏览器的外观保持一致

请特别注意Chrome、Safari和Firefox之间的行距、每个单元格中的顶部填充以及“NA”字符串的位置有多么不同

以下是HTML：

<div class="timeline">
    <h2>Trip Blog Guit Tripper</h2>

    <section>
        <h3>US Trip 2013</h3>
        <ul
            ><li class="sub-list united-states"
                ><ul
                    ><li class="status-done days-9">Seattle</li
                ></ul
            ><li class="sub-list canada"
                ><ul
                    ><li class="status-in-progress days-2">Vancouver</li
                    ><li class="category-transport train days-4">Train</li
                    ><li class="days-12">Toronto</li
                    ><li class="days-10">Montreal</li
                    ><li class="days-5 bidirectional">Quebec</li
                ></ul
            ></li
            ><li class="sub-list united-states"
                ><ul
                    ><li class="days-21">New York</li
                    ><li class="days-7 bidirectional">Boston</li
                    ><li class="days-3">Philadelphia</li
                    ><li class="days-7">Chicago</li
                    ><li class="days-6">New Orleans</li
                    ><li class="days-1">Houston</li
                    ><li class="days-8">Austin</li
                    ><li class="days-3">Los Angeles</li
                ></ul
            ></li
        ></ul>
    </section>
</div>

我想做的是：在文档流中保留一系列单元格，同时突出显示它们的特定范围。我已经求助于将列表设置为

display:inline

和单元格

display:inline block

。（高度0）

display:inline

元素的填充将增加到单元格高度以外的一点，以实现高光效果。不幸的是，似乎很难让它在所有浏览器中都正确显示

---

关于如何解决这一问题，或者解决问题的其他方法的想法？请记住，突出显示的部分能够跨行拆分并继续下一部分是至关重要的。

好吧，所有浏览器都以不同的方式呈现CSS间距，除了针对每个浏览器并微调CSS以实现一致的呈现外，您别无选择

例如，对于Safari，您将使用：

@media screen and (-webkit-min-device-pixel-ratio:0) {
/* Safari-Opera specific declarations here */
}

对于Chrome+Safari（因此webkit）：

而iPhone呢

@media screen and (max-device-width: 480px) {
    /* iPhone specific declarations here */
}

---

但问题是：你真的，真的，需要它吗？根据经验，如果更改并不重要，最好不要使用黑客或特殊样式，毕竟，没有人会比较不同的浏览器。但当然，这是你的选择，如果你需要的话，这里有代码

我通常很乐意忽略这些事情，但我肯定需要单元格顶部和底部的高光是相等的，而且在Firefox中，高光是如此之薄，这一点非常明显。我想也许我遗漏了什么。毕竟，我对CSS还是相当陌生的。我不确定突出显示是什么意思，因为我没有看到任何明显的突出显示，但如果你是指细灰线，请尝试添加

位置：相对；顶部：2个至
。时间线li
/* saf3+, chrome1+ */
@media screen and (-webkit-min-device-pixel-ratio:0) {
/* Chrome-Safari specific declarations here */
}

@media screen and (max-device-width: 480px) {
    /* iPhone specific declarations here */
}