Question

如何让the following HTML/CSS (via JSFiddle)在浏览器中保持一致？

特别注意行间距，每个单元格中的顶部填充以及＆＃34; NA＆＃34;的位置。字符串位于Chrome，Safari和Firefox之间。

这是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 */
}

但问题是：你真的，真的，需要吗？根据经验，如果变化不是很重要，最好不要使用黑客或特殊样式，毕竟没有人会在浏览器之间进行比较。但当然，这是你的选择，如果你需要这样做，你可以在这里找到代码

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

1 个答案: