不需要的边框 CSS（Chrome 和 Firefox）

Question

我已经对这里的现有问题进行了真正的搜索，并且我已经搜索 Google 数小时以寻找解决方案 - 但似乎这个问题非常具体。

简而言之，我有一个相当大的 table，其中包含多行（每行一个人）。每行中只有一列，我使用 W3.CSS "split" 分成多个 DIV。（我使用 DIVs 而不是额外的 TD，因为每个 DIV 的宽度对于每个人来说都是不同的——有点像甘特图风格的劳动力管理系统）。

我遇到的问题是，特别是在 Chrome（不是 IE 或 Edge）中，我遇到了这个随机边距：

The page in Chrome
The page in IE/Edge

我用Chrome的Dev Tools试了一下，你可以从this snip that the whole row (whether it's the TD or one or the DIVs - I don't know) seems to be 30px high, yet the content is only 24px.

看到

这让我抓狂，所以我非常感谢任何支持 - 即使是告诉我我遗漏了一些明显的东西！编码方面，我只是刚刚过了初学者的地步，所以我很开放，我这样做不对！

<div class="w3-container" style="width: 100%; margin:auto; ">
<table id="php_siteid" style="width: 100%; border-spacing: 0; border-collapse: collapse;"> 
  <tr>
<td style="border-bottom: 3px #FFFFFF solid; padding: 0px; " class="<?php print rowClassChange($i); ?>">
    <div style="width: 100%;" class="w3-cell-row">
        <div style="width: 100px; padding-left: 10px;" class="w3-cell w3-left-align">
            <div class="w3-cell-row" style="width: 100%;">
                <div class="tooltip w3-cell" style="width: 100%;"><?php if (hasAccess("scheduler")) { ?><strong><span class="fakeLink" onclick="document.getElementById('id<?php print $agentLineDetails["agentid"]; ?>').style.display='block'" style="font-weight: bold;"><?php print $agentLineDetails["agentname"]; ?></span></strong><?php } else { include('inc/inc_agentsummary.php'); ?><strong><span class="fakeLink" onclick="document.getElementById('id_summary_<?php print $agentLineDetails["agentid"]; ?>').style.display='block'" style="font-weight: bold;"><?php print $agentLineDetails["agentname"]; ?></span></strong><?php } ?><span class="tooltiptext"><strong><?php print $agentLineDetails["agentname"] . "<BR>" . $shiftTime; ?></strong></span>
                </div>
            </div>
        </div>
        <div class="w3-cell w3-left-align w3-rest">
            <div class="w3-cell-row" style="width: 100%;">
                <div class="w3-cell w3-left-align" style="background-color: transparent; width: 10%;"></div>
                <div class="w3-cell w3-left-align" style="background-color: #7CBD85; width: 20%;"></div>
                <div class="w3-cell w3-left-align" style="background-color: #a32985; width: 15%; color: white; padding-left: 10px; border-left: 1px #E7E7E7 solid; border-right: 1px #E7E7E7 solid;">MFMT</div>
                <div class="w3-cell w3-left-align" style="background-color: #7CBD85; width: 20%;"></div>
                <div class="w3-cell w3-left-align" style="background-color: transparent; width: 35%;"></div>
            </div>
        </div>
    </div>
    <?php if (hasAccess("scheduler")) { include('inc/inc_agentweeklinks.php'); }  ?>
</td>
  </tr>
</table>
</div>

提前致谢 - 如果需要，很乐意提供更多 information/code:)

杰米

Answer 1

这都是关于每个浏览器的默认行为。 Chrome 没有为 vertical-align 设置任何值。只需将属性（在您的情况下，您将分配哪个值无关紧要）定义为具有特定 display 值的 .w3-cell class：

.w3-cell{
   display:table-cell;
   vertical-align:middle
}

不需要的边框 CSS（Chrome 和 Firefox）

Unwanted Border CSS (Chrome & Firefox)

css

margin

w3.css