chrome中图像右侧的空间是多少?

x-y*_*uri 5 html css google-chrome

请考虑以下示例:

<!doctype html>
<html>
<head>
    <style>
        td {
            padding: 0;
            background: red;
        }
        img {
            display: block;
        }
    </style>
</head>
<body
    ><table
    ><tr
      ><td
        ><img src="https://raw.githubusercontent.com/sinatra/sinatra/v1.4.7/lib/sinatra/images/500.png"
      ></td
    ></tr
    ></table
></body>
</html>
Run Code Online (Sandbox Code Playgroud)

chrome图像右侧有一条红线.没有这样的线路firefox.它看起来不像是一个空格,因为html标记在标签之间没有空格.它似乎不是一个保证金,因为开发人员工具不报告任何保证金.

这是什么?它需要多少空间?

我正在运行chromium-47.0.2526.111(64位),如果有的话.

UPD我做了一个没有空格的例子,专门用来表明红线不是由空格引起的.

接下来,发现当Zoom为例如110%时出现该行.所以,现在一切都清楚了.

Mor*_*der 5

这是因为<td>元素的显示方式.如您所见,它们显示为:

display: table-cell;
Run Code Online (Sandbox Code Playgroud)

这是因为table-cell用于计算像素.如果您启用了DPI缩放(或缩放),则1个像素不等于CSS中的1个像素,因此它将开始表现得很奇怪.

您可以找到<td>内部的另一种方法,<tr>或者只是将显示更改为display: inline;

这都是因为像素大小的计算方式.我知道这听起来很奇怪,但1px不是1个物理像素.基本上发生的是你的td的背景根据你的图像大小而变化.当您的图像达到奇数时(由于缩放或DPI缩放),它将向下或向上舍入.这是计算发生时的错误.

来源:https
://www.w3.org/TR/css3-values/#absolute-lengths http://www.quirksmode.org/blog/archives/2010/04/a_pixel_is_not.html