我试图在IE8,Firefox和Safari中的textarea内部以像素为单位提供一致的宽度,以便文本内容尽可能地以可预测和一致的方式包装行.
Firefox正在做一些有点奇怪的事情:它在textarea的内容空间与其他两个浏览器之间有一个额外的填充像素,与一个类似装备的div块相比.
将此类应用于textarea和div时,差异是可见的,div中的文本触及红色背景的左外边缘,但textarea中的文本尽管填充为零,仍具有1 px填充式偏移:
.testbox{
padding:0;
margin:0;
border:0;
background: red;
width: 40px;
height: 40px;
font-size: 12px;
line-height: 16px;
}
Run Code Online (Sandbox Code Playgroud)
填充的其他值最终显示一个额外的偏移像素与div.
关于是否有办法欺骗Firefox渲染textarea就好像它是一个div,或者为textarea调整这个不填充但看起来像填充属性的任何想法?
我在实时编辑HTML textarea时创建了一个建议面板.为了获得{x,y}坐标,我使用了一个隐藏在textarea后面的div.我得到了carret的位置,然后将carret之前的文本和span标签复制到隐藏的div.然后我得到跨度坐标并将其提供给建议面板.
唯一的问题是,当我向textarea添加一个没有空格的长行时,该行在div面板中被剪切时被包裹(因此在我添加回车之前,建议面板不再适合放置).
有没有办法在这两个地方(textarea和div面板)以相同的方式拟合文本?
(我正在使用jQuery)