如何在浏览器中实现文本元素的像素完美定位和间距？答案

【问题标题】：How can I achieve pixel-perfect positioning and spacing of textual elements across browsers?如何在浏览器中实现文本元素的像素完美定位和间距？
【发布时间】：2011-10-22 20:57:45
【问题描述】：

目前，我们正在尝试在 Mac 和 Windows 上的 Safari/Chrome/Firefox/IE 中实现 textarea 元素的一致格式。我相信这可能是一个兔子洞，因为它们的任何组合都可能以稍微不同的方式产生格式 - 也许一种组合在这里向 div 添加一些填充的方式与其他组合不同，另一种组合在那里打破多行文本的方式不同于其他的，以此类推。

除了使用textarea（或div）元素，我们可以使用HTML5的canvas实现像素完美定位吗？还是使用 Raphael JavaScript 库？或者可能是其他一些 JS 库？

主要是像素完美，我的意思是任何任意文本都应该在上述任何浏览器中以完全相同的方式呈现（尤其是在换行和填充方面）。

（目前我宁愿避免使用基于 Flash 的解决方案，除非那是唯一解决方案...）

【问题讨论】：

在画布可用的地方，您可以实现“接近像素完美的定位” - 不同之处在于不同浏览器/版本访问/解释字体/样式的方式......“真正像素完美”是AFAIK 只能通过基于 Flash 或 Silverlight 的解决方案实现......
dowebsitesneedtolookexactlythesameineverybrowser.com
@Pumbaa80 是的，在这种情况下，确实如此。你精辟的评论是无知和不受欢迎的。
你一定是在开玩笑。为什么你的情况会有所不同？一代又一代的 Web 开发人员一直在努力实现您的要求，但都失败了。 Canvas 和 SVG 没有区别，因为“问题”是字体渲染。唯一可行的“解决方案”是使用 Flash 或images 代替文本，这让 Web 开发看起来很荒谬。
@Pumbaa80 正如您所说，几代 Web 开发人员都在努力创建交互式网页。然后时代变了。

标签： html cross-browser text-rendering pixel-perfect

【解决方案1】：

将文本发送到服务器，让服务器渲染图像，显示图像。瞧。

【讨论】：

不知道为什么这被否决了。这完全回答了这个问题。文本将在每个浏览器中完美呈现像素，无需使用 Flash。
可悲的是，这似乎仍然是有效的答案。 “可悲”，因为我想要像素完美的图像数量的往返负载不小（并且文本是动态生成的，因此无法预渲染）。
我也不知道为什么这也被否决了。苹果前段时间做过这样的事情。

【解决方案2】：

我会说这几乎是不可能的。

我还要说，没有理由让所有浏览器都像素完美，因为绝大多数访问者只使用一种浏览器查看您的网站。那些确实在多个浏览器中访问您的网站的人（例如在工作中和在家中）不太可能注意到偏离几个像素或边框颜色略有不同的元素。

我们应该关心的是内容在每个浏览器中看起来都不错。

也就是说，这里有很多 textarea 技巧：http://css-tricks.com/6841-textarea-tricks/

【讨论】：

Web 应用程序前端是一个所见即所得的 PDF 生成器。如果文本元素在不同浏览器的不同点中断，则 PDF 输出将不一致。因此我的问题。
啊！您应该将此添加到问题中。这是重要的上下文。
我有理由在浏览器和计算机上保持像素完美——我正在尝试将单独元素中的文本对齐，以使它们看起来相同（涉及无限平铺和文本生成的长解释)。

【解决方案3】：

PDF 存在的一个主要原因是浏览器不是像素相同的布局，而是 PDF。除此之外，甚至不能保证从一个操作系统/浏览器到下一个操作系统/浏览器的字体相同。

即使，如果您不让浏览器定位任何东西并且您自己进行所有像素级别的定位，您仍然不一定需要使用相同的字体。如果你让浏览器定位任何东西，那么你可以有变化。

【讨论】：

【解决方案4】：

我不确定这是否可能，但是您可能想要研究的一件事是使用 Firefox 的 Web 开发人员工具栏或 chrome 的 Web 开发人员附加组件。有一个选项可以禁用浏览器默认样式。选中此项，然后设置所有内容的样式。边框、边框类型、所有边距、填充、背景颜色等。然后重新启用浏览器默认样式并确保它看起来相同。如果没有，请清洗、冲洗并重复。

此外，如果字体起作用，您必须将它们嵌入到页面中，因为某些操作系统可能没有安装特定的字体。

【讨论】：

【解决方案5】：

一种解决方案是从一张白纸开始您的 css 吗？给所有东西一个已知的默认值？

例如，我这样开始我的 css 文件，所以我总是知道会发生什么：

*{
margin:0;
padding:0;
}

这就是你要找的吗？同样，您可以将 '*' 更改为 'textarea'。

【讨论】：

是的，这肯定有帮助，但它不能处理 CSS 永远无法设置样式的匿名 div 的问题，例如bugzilla.mozilla.org/show_bug.cgi?id=326123
如果现在有人偶然发现这个问题：考虑使用 normalize.css 之类的东西而不是 CSS 重置：necolas.github.io/normalize.css