Question

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

简而言之，我有一个相当大的表，其中包含多行（每行一个人）。每行中有一列，我使用W3.CSS“分割”成多个DIV。（我使用DIV代替额外的TD，因为每个DIV的宽度对于每个人来说都是不同的 - 有点像甘特图样式的劳动力管理系统）。

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

我已经使用Chrome的开发工具试图找出它，你可以从this snip看到整行（无论是TD还是一个或DIV - 我不知道）似乎为30px高，但内容仅为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>

非常感谢 - 如果需要，很乐意提供更多信息/代码：）

杰米

Answer 1

关于每个浏览器默认行为的全部内容。 Chrome不会为vertical-align设置任何值。只需将具有该特定.w3-cell值的display类定义为该属性（在您的情况下选择要分配的值）：

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

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

1 个答案: