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

Question

如何使the following HTML/CSS (via JSFiddle)在不同浏览器之间保持一致？

特别要注意的是，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>

以下是通过SCSS生成的CSS (不包括重置)，以及一些注释：

/*container layout*/ 
.timeline {
  background: tan;
  width: 450px;
  padding: 5px; }    
  .timeline *, .timeline *:before, .timeline *:after {
    box-sizing: border-box; }
  .timeline h2 {
    text-align: center; }
  .timeline section {
    background-color: white;
    border: solid;
    margin: 5px;
    padding-left: 5px;
    padding-right: 5px; }

  /*inline lists*/
  .timeline ul {
    padding: 0 0 0 0;
    display: inline; }

  /*inline-block cells*/
  .timeline li {
    height: 30px;
    display: inline-block;
    text-align: center;
    padding-top: 8px;
    padding-left: 10px;
    padding-right: 10px;
    border-radius: 4px;
    font-size: 18px;
    font-family: sans-serif;
    list-style-type: none; }

  /*inner list adjustments*/
  .timeline li.sub-list {
    display: inline;
    padding-left: 1px;
    padding-right: 0;
    padding-top: 9px;
    padding-bottom: 9px; }

  /*css country code*/
  .timeline .sub-list::before {
    font-family: sans-serif;
    display: inline-block;
    vertical-align: middle;
    line-height: 12px;
    width: 18px;
    font-size: 12px;
    font-weight: bold; }

  /*prettiness and spacing*/
  .timeline li {
    color: #1a1a1a;
    background-color: #a6a6a6;
    border-color: #343434; }
  .timeline .sub-list::before {
    color: #4d4d4d;
    content: "N A"; }
  .timeline .sub-list {
    background-color: gray; }
  .timeline li {
    margin-top: 5px;
    margin-bottom: 5px; }
  .timeline li:nth-child(1) {
    margin-left: 0; }
  .timeline li {
    margin-left: 5px;
    margin-right: 5px; }
  .timeline li:last-child {
    margin-right: 0; }
  .timeline .sub-list li {
    margin-left: 2px;
    margin-right: 2px; }

我想要做的是:在文档流中保留一系列单元格，同时突出显示它们的特定范围。我采用了列表为display: inline，单元格为display: inline-block的方法。然后将(高度0) display: inline元素的填充增加到略高于单元格的高度，以实现突出显示效果。不幸的是，似乎很难让它在所有浏览器上都看起来正确。

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

Answer 1

所有的浏览器都以不同的方式呈现CSS间距，除了针对每个浏览器并微调CSS以获得一致的呈现之外，您对此无能为力。

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

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

对于Chrome+Safari (因此webkit)：

/* saf3+, chrome1+ */
@media screen and (-webkit-min-device-pixel-ratio:0) {
/* Chrome-Safari specific declarations here */
}

而对于iPhone

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

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