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

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。然后将 (height 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 或特殊样式，毕竟没有人会在浏览器之间进行比较。但当然，这是您的选择，如果您需要这样做，这里有代码