1

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

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

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

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

4

5 回答 5

3

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

于 2011-08-09T03:29:02.133 回答
2

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

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

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

也就是说，这里有一个很棒的textarea技巧列表：http ://css-tricks.com/6841-textarea-tricks/

于 2011-08-09T03:21:13.800 回答
1

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

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

于 2011-08-09T02:21:30.040 回答
0

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

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

*{
margin:0;
padding:0;
}

那是你要找的吗？同样，您可以将“*”更改为“textarea”。

于 2011-08-09T02:17:22.047 回答
0

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

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

于 2011-08-09T02:18:00.373 回答