在 Internet Explorer 11 上，我遇到了导致元素溢出的子像素渲染问题。

如您所见，在 IE11 上，仪表的红色部分似乎从底部“窥视”，而在其他 2 个主要浏览器 Chrome 和 FireFox 上似乎很好。

如果我们放大 IE 中的问题，我们可以看到发生了什么：

它似乎在遮罩上渲染一个子像素。
标题“温度”呈现为高度为 34.5 像素的元素，导致其下方的所有元素向下移动 0.5 像素，从而导致此问题。

这就是仪表的构建方式：JSFiddle

有没有办法解决这个问题，除了给标题一个静态高度，以确保下面的所有元素都在一个全像素上？

假设您使用此代码将元素垂直居中

（这个问题不是关于对齐的东西，所以请不要对对齐提出建议）

这会导致您的元素变得模糊吗？

本文提到使用 translate 可以将元素定位在半像素值，从而在某些浏览器上造成模糊。浏览器是否仍然这样做，或者它们是否已被修补以不模糊？如果您使用百分比作为参数进行翻译，百分比是否可以计算为非整数像素值（从而允许模糊的可能性），还是四舍五入？EX：如果你使用 66%，这会导致小数像素值吗？ 这篇文章声称你可以设置transform-style: preserve-3d;元素的父元素以避免模糊，但评论中有人声称它对他不起作用..它真的起作用吗？

style.top 和 translateY() 似乎都四舍五入到全像素值。有没有办法让图像停留在子像素上？

举个例子，这里我将一个包含图像的 div 每 100 毫秒向下移动 0.1 个像素，正如你所看到的，它每秒只跳跃一个完整的像素。 https://jsfiddle.net/je391bfr/

注意：如果我愿意，我想要一些可以在子像素上停止的东西，而不仅仅是在动画期间在子像素上。

几周前，我实现了一个简单的块匹配立体算法，但结果很糟糕。所以我在互联网上搜索找到更好的算法。在那里我找到了Heiko Hirschmueller 出版的半全局匹配 (SGM) 。它在处理时间方面获得了最好的结果之一。

正如您在此处看到的，我已经实现了该算法并获得了非常好的结果（与简单的块匹配相比）：

我使用计算出的视差值将 2D 点重新投影到 3D，结果如下

在 SGM 结束时，我有一个包含每个像素的汇总成本的数组。视差相当于成本值最低的指标。

问题是，搜索最小值只返回离散值。这会在点云中产生单独的层。换句话说：圆形表面被切割成许多层（见点云）。

Heiko 在他的论文中提到，通过将多项式函数拟合到成本数组中并以最低点作为视差，很容易获得亚像素精度。

这个问题并不局限于立体视觉，所以换句话说，任务如下：

• given：一个值数组，表示一个多项式函数。
• Wanted：多项式函数的最低点。

我不知道该怎么做。我需要一个快速算法，因为我必须为图像中的每个像素运行此代码

例如：500x500 像素，每个成本 60-200 => 算法必须运行 15000000-50000000 次！！）。

我不需要实时解决方案！我当前的 SGM 实现（L2R 和 R2L 匹配，还没有 cuda 或多线程）需要大约 20 秒来处理 500x500 像素的图像；）。

我不要求图书馆！我尝试实现自己的独立计算机视觉库:)。

谢谢您的帮助！

亲切的问候， 安德烈亚斯

目的：

我正在编写与此类似的代码来创建一个输入字段具有嵌入式按钮的组件：

http://codepen.io/anon/pen/pgwbWG?editors=110

如您所见，按钮绝对定位top并bottom设置为0，以实现 100% 高度元素。

还要注意的是，文本输入的边框必须保持可见并包裹按钮。为了实现这一点，我margin: 1px在按钮上添加了一个（应该）空间来显示周围的文本输入红色边框（通常在输入字段内容无效时）。

问题：

是在 Firefox 上它（大部分）正确呈现，而在 Chrome 上（显然在最新的 Safari 上）它将在按钮底部有 1px 的间隙。

CSS 看起来不错，但它似乎是渲染中的计算/舍入问题，按钮的底部或顶部边距并不是真正的 1px（可以看到它检查元素）。而且输入的填充似乎也有影响。

在不同的缩放率下，它会在button的顶部或底部添加或删除 1px 的边距，从而产生 1px-gap 或覆盖边框。

当我将按钮边距设置为时0px，底部边距是固定的，但我在顶部松开了 1px 边距，最终覆盖了text-input的红色边框。

示例：

可能我解释不清楚或过于冗长，所以这里有一些错误的截图，来自 Chrome 上的不同缩放（注意 CSS 总是相同的）：

解决方案：

我找不到跨浏览器解决方案。如何处理它并获得一致的组件？（请不要使用Javascript）

我正在编写一个控制工业机械的用户界面程序。

本机是用于电子生产行业的全自动在线丝印机。该机器的确切用途是将焊膏印刷到裸 PCB 上。该系统包括 2 个摄像头，它们形成了一个视觉系统，用于定位基准点并自动化机器所涉及的过程。我遇到的问题是我需要能够在从摄像头拍摄的图像中定位形状和对象，这是直截了当，但是 - 为了获得所需的精度，我需要能够以亚像素精度来做到这一点。

两个摄像头组成一个双视觉摄像头，一个摄像头将向上看模板，另一个摄像头向下看 PCB。双视觉相机位于可在 X 和 Y 方向移动的移动托架上。PCB 被夹在桌子上，可以在 X、Y 和 theta 方向移动。视觉系统用于检测 PCB 位置和模板位置之间的差异，然后调整工作台以将两者对齐。

编辑：

这是从现有 UI 程序中截取的部分屏幕截图：

模板图像是顶部图像，PCB 是底部图像，这里的图像是灰度图像 - 在我正在查看的新系统中，我正在使用颜色，但需要使用灰度。

注意：当您阅读本文时，您可能在想“为什么不直接使用现有 UI 中使用的任何内容？” 现有的 UI 是用 VB6 编写的，我想摆脱它，程序的视觉方面是由不再存在的第三方公司编写的 .ocx。

我玩了一点 AForge.NET，发现它真的很容易使用，我可以用它来定位各种不同的形状并找到它们的中心，这很棒，但它没有亚像素精度. 但是，我可以将此作为起点，然后将子像素算法应用于单个中心像素甚至整个形状。

编辑：

这是从我使用 AForge 编写的测试程序中获取的示例图像：

红色轮廓和十字准线是我作为视觉辅助/实验添加的。这是用我可能使用的相机拍摄的，它的分辨率为 1280 x 1024，但镜头不是我将使用的实际镜头，这就是图像略微“鱼眼”的原因。感兴趣的对象也会比这更好。

在实际系统中，镜头将在模板和 PCB 上看到 10mm x 8mm 的正方形，这意味着每个像素将代表 7.8125um^2，但是我可以一次以 1.25um 的增量移动 XYY 表，这基本上没用如果我不能用相机看到这些动作。我需要 1um（亚）像素精度。

有谁知道我可以用什么来做到这一点？我已经搜索了很长一段时间，但我似乎找到的只是有关以亚像素精度渲染图像的信息。

或者，更好的是，有谁知道我如何自己写一些东西来做到这一点？我什至不知道从哪里开始！

任何反馈将不胜感激。

为什么手动计算的高度和浏览器计算的高度之间存在差异，使用 vh 单位。由于这种计算错误，我在亚像素级别遇到了问题。

如果 100vh 是 535px 那么为什么在除以 100 时最后会有这个“...005”。应该有 5.35 就是这样，在...之后没有奇怪的数字

测试在小提琴中。

https://jsfiddle.net/szpadel444/fdhvkygx/1/

我想找到亚像素，我重新研究了这个主题但是我认为亚像素必须是 152.6 ， 49.3 ......我在 opencv http://docs.opencv.org/2.4/modules/imgproc/doc/feature_detection找到这个文档.html?highlight=cornersubpix#cornersubpix 我试试这段代码

但我有这个结果：

这个代码只找到角落的子像素我想找到边缘的子像素

我正在尝试使用 2D FFT 和傅里叶变换移位定理来移位表示具有亚像素精度的图像的 2D 数组。当移位值是整数（像素精度）时效果很好，但是当移位值不是整数时，我会得到很多伪像，即像素的一小部分。代码如下：

因此， shift_fft(input_array,[2,0]) 将起作用，但 shift_fft(input_array,[2.4,0]) 在没有工件的情况下将不起作用。我做错了什么？例如，考虑 128x128 像素的 Lena 图像。如果我想在每个方向上移动 10.4 像素，我会得到一些图像的摆动调制。图像如下：

前：

后：

嘿，我尝试使用隔离方法修复 susy 亚像素舍入错误，但不知何故它仍然存在于 chrome 中....无法弄清楚我实际上做错了什么，非常感谢您的帮助，真的赞赏

http://codepen.io/HendrikEng/pen/PzZkjX

html:

scss: