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

时间:2011-08-09 02:12:58

标签: html5 cross-browser text-rendering pixel-perfect

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

我们可以使用HTML5 textarea实现像素完美定位,而不是使用div(或canvas)元素吗?或者使用Raphael JavaScript库?或者其他一些JS库?

主要是,通过像素完美,我的意思是在任何上述浏览器中,任何文本都应以完全相同的方式呈现(特别是关于换行符和填充)。

(我希望暂时避免使用基于Flash的解决方案,除非那是唯一的解决方案......)

5 个答案:

答案 0 :(得分:3)

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

答案 1 :(得分:2)

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

我还说没有理由在所有浏览器中都有像素完美,因为绝大多数访问者只能通过一个浏览器查看您的网站。那些在多个浏览器中访问您网站的人(比如在工作场所和家里)不太可能注意到几个像素或边框颜色略有不同的元素。

我们应该关注的是每个浏览器中的内容都很好。

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

答案 2 :(得分:1)

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

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

答案 3 :(得分:0)

一个解决方案是用一块干净的石板来开始你的css吗?将所有内容都设为默认值?

例如,我启动这样的css文件,所以我总是知道会发生什么:

*{
margin:0;
padding:0;
}

这就是你要找的东西吗?同样,您可以将'*'更改为'textarea'。

答案 4 :(得分:0)

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

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