如何在浏览器中实现文本元素的像素完美定位和间距？
目前，我们正在尝试在 Mac 和 Windows 上的 Safari/Chrome/Firefox/IE 上实现 textarea 元素的一致格式。我相信这可能是一个兔子洞，因为它们的任何组合都可能以稍微不同的方式产生格式——也许一种组合在此处为 div 添加了一些填充，与其他组合不同，另一种组合以不同的方式打破了多行文本其他人，等等。
我们可以使用 HTML5 的 canvas 来实现像素完美的定位，而不是使用 textarea （或 div）元素吗？或者使用 Raphael JavaScript 库？或者也许其他一些 JS 库？
主要是，通过像素完美，我的意思是任何任意文本都应该在上述任何浏览器中以完全相同的方式呈现（特别是在换行符和填充方面）。
（我目前宁愿避免基于 Flash 的解决方案，除非这是唯一的解决方案......）
Right now, we are trying to achieve consistent formatting of textarea elements, across Safari/Chrome/Firefox/IE on Mac and Windows. I believe this may be a rabbit hole, since any combination thereof could produce formatting in a slightly different way -- maybe one combination adds a bit of padding to a div here differently than the others, another one breaks multi-line text there differently than the others, and so on.
Instead of using textarea (or div) elements, can we achieve pixel-perfect positioning using HTML5's canvas? Or using the Raphael JavaScript library? Or maybe some other JS library?
Mainly, by pixel-perfect, what I mean is any arbitrary text should get rendered in the exact same way (especially with respect to line breaks and padding) in any of the above-mentioned browsers.
(I'd prefer to avoid Flash-based solutions for the moment, unless that is the only solution...)
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（5）
将文本发送到服务器，让服务器渲染图像，显示图像。瞧。
Send the text to the server, have the server render an image, display the image. Voilà.
我想说这几乎是不可能的。
我还想说，没有理由在所有浏览器上都拥有像素完美，因为绝大多数访问者仅使用一种浏览器查看您的网站。而那些确实使用多个浏览器（例如在工作场所和家里）访问您的网站的人不太可能注意到偏离几个像素或边框颜色略有不同的元素。
我们应该关心的是内容在每个浏览器中看起来都很好。
也就是说，这里有一个很棒的
textarea技巧列表：http:// css-tricks.com/6841-textarea-tricks/I would say this is nearly impossible.
I would also say that there is no reason to have pixel perfect across all browsers because the overwhelming majority of visitors only view your site with one browser. And those who do visit your site in more than one browser (say at work and at home) are unlikely to notice elements that are off a few pixels or have slightly different border colors.
What we should be concerned about is that the content looks good in each browser.
That said, here's a great list of
textareatricks: http://css-tricks.com/6841-textarea-tricks/PDF 存在的主要原因之一是浏览器不支持像素相同的布局，但 PDF 却如此。除此之外，甚至不能保证不同操作系统/浏览器的字体相同。
即使，如果您不让浏览器定位任何内容并且您自己进行像素级定位，您仍然不一定可以使用相同的字体。如果你让浏览器定位任何东西，那么你就可以有变化。
One main reason that PDF exists is that browsers are not about pixel-identical layout but PDF is. Among other things, not even typefaces are guaranteed to be the same from one OS/browser to the next.
Even, if you don't let the browser position anything and you do all your own pixel level positioning, you still won't necessarily have the same fonts to work with. If you let the browser position anything, then you can have variations.
一种解决方案是从头开始你的 CSS 吗？给所有东西一个已知的默认值？
例如，我像这样启动我的 css 文件，这样我总是知道会发生什么：
这是您正在寻找的吗？同样，您可以将“*”更改为“textarea”。
Would one solution be to begin your css with a clean slate? Give everything a known default?
For example, I start my css files like this so I always know what to expect:
Is that what you're looking for? Similarly, you could change '*' to 'textarea'.
我不确定这是否可能，但是您可能想要研究的一件事是使用 Firefox 的 Web 开发人员工具栏或 chrome 的 Web 开发人员附加组件。有一个选项可以禁用浏览器默认样式。检查此项，然后设置所有内容的样式。边框、边框类型、所有边距、填充、背景颜色等。然后重新启用浏览器默认样式并确保它看起来相同。如果没有，请清洗、冲洗并重复。
此外，如果字体起作用，您将必须将它们嵌入到页面中，因为某些操作系统可能没有安装特定的字体。
I'm not sure if it is possible, however one thing you may want to look into is using the web developer toolbar for firefox or the web developer add-on for chrome. There is an option to disable browser default styles. Check this and then style everything. The borders, border type, all margins, paddings, background colors, etc. Then reenable browser default styles and make sure it looks the same. If not, wash, rinse and repeat.
Also, if fonts play a part, you will have to embed them into the page since some operating systems may not have a particular font installed.