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

我在这里对现有的问题进行了真正的搜索，我在谷歌搜索了几个小时寻找解决方案——但这个问题似乎相当具体

简而言之，我有一个相当大的表，其中包含多行（每行一个人）。每行中只有一列，我使用将其“拆分”为多个div。（我使用DIV而不是额外的TD，因为每个DIV的宽度对于每个人都是不同的——有点像甘特图式的员工管理系统）

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

我已经使用Chrome的开发工具来尝试解决这个问题，你可以从中看到整行（无论是TD还是其中一行，还是Div，我不知道）似乎都是30px高，但内容却很简单

这让我发疯，所以我真的很感激任何支持——即使是告诉我我错过了一些明显的东西！就编码而言，我刚刚过了初学者的阶段，所以我的思想是开放的，我做得不对

<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>

这都是关于每个浏览器的默认行为。Chrome没有为
垂直对齐设置任何值。只需将该属性（在您的情况下，无论您将分配哪个值）定义到具有特定
显示
值的
类：

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

显示
属性是否为
内联块
？如果是，您可以尝试将
垂直对齐：中间（或其他）
添加到css或样式中，请提供适当的。这包括重现此问题所需的静态HTML（加上可能需要的其他内容、样式表等），因为这里没有人可以使用您的服务器端设置，所以我们无法确定您的PHP代码一开始会生成什么。客户端问题讨论=发布客户端代码。仍然。我们希望您展示我们可以实际使用并运行测试的代码。此代码还应显示您的问题。因此，请提供我们可以看到问题的HTML和CSS。请使用任何CSS重置，如normalize.CSS，并给出一个tryDon，不要仅仅因为一个浏览器以您希望的方式显示内容，就认为它在另一个浏览器上“正确”呈现内容，尤其是在使用框架时。你试过Firefox或其他浏览器吗？非常感谢-这在Chrome和Firefox中解决了这个问题，现在它在所有浏览器中都能一致显示。我学到了一些新东西！非常感谢你，谢谢Soheil。