CSS垂直白线问题Chrome和Opera答案

【问题标题】：CSS vertical white line issue Chrome and OperaCSS垂直白线问题Chrome和Opera
【发布时间】：2018-03-19 15:32:42
【问题描述】：

我在 Chrome 上遇到垂直白线问题，在 Opera 上也是如此。 Microsoft Edge 没有这个问题。

Js Fiddle

<div id="mainContainer" style="margin:auto; text-align: center">

    <table cellspacing="0"; cellpadding="0">
        <tbody>
            <tr>
                <td class="left">Lolo1</td>
                <td class="right" style="background-color: green">BlaBla1</td>
            </tr>
            <tr>
                <td class="left">Lolo2</td>
                <td class="right" style="background-color: green">Blabla2</td>
            </tr>              
        </tbody>
    </table>

如您所见，右边有一条意想不到的线，我尝试了多种方法来操纵它，但还没有成功。感觉像是浏览器之间的字体大小差异，但它不应该。

另外，如果你尝试移除 body 元素的 margin-top，你会看到底部也出现了一条水平的白线，这是另一个奇怪的细节。

【问题讨论】：

我认为这是一个分辨率问题，如果您查看不同缩放的小提琴，您可以看到它在某些缩放级别消失。在我更改缩放比例之前，您所说的内容不会出现在我的屏幕上。
是的，你是对的。问题是为什么，它只是一个有两列的基本表。感谢您的回复。

标签： html css google-chrome html-table opera

【解决方案1】：

似乎 table 元素的 display: inline value 导致了这个问题。删除它或将其更改为显示：inline-table 使 tds 完全适合我的表格。

【讨论】：