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%时出现该行.所以,现在一切都清楚了.
这是因为<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