css - 实现隐藏跟踪像素的最佳 CSS 是什么？

Question

我们开发了一种引擎，可以向不同的移动设备和网站转换广告。广告只是带有横幅和/或一些 javascript 的 HTML 标记。有时我们需要在广告标记中包含一个隐藏像素，以获取广告实际显示在最终用户设备上的通知。

像素基本上是一个简单的 HTML 图像标签:

<img src="http://the-notification-url" />

问题是:什么 css 应该用于:1)隐藏用户设备上的像素2) 确保像素不会占用任何空间并且不会影响其他 HTML 元素的位置3) 确保所有浏览器实际上都会尝试下载像素(即触发“src”URL)？

我可以看到两种选择:

display:none;

或

visibility: hidden; position: absolute;

就我们要实现的三个目标而言，这些备选方案是否相同？最重要的目标实际上是第三个目标。是否保证具有 display:none 或 visibility:hidden 的 img 元素将始终被所有流行的浏览器(windows/linux PC 和移动设备 ios/android)下载？

Answer 1

您应该使用 display: none; 因为 display: none; 不会占用文档空间，而使用 visibility: hidden; 将为像素保留空间..

Demo (使用 display: none;)

Demo 2 (使用可见性:隐藏；)

---

使用 position: absolute; 与 visibility: hidden; 没问题，但如果 display: none; 正在做这项工作，那么你就没有必须声明两个属性...而且，无论您做什么，您的 img 都会被请求...

---

此外，您可能想知道是否使用 display: none; 阻止了图像下载，但你错了，CSS display: none; 与图片加载。

好好读一读here