快速业务通道

webkit下text-indent首行缩进文字问题

作者 佚名技术 来源 CSS技术 浏览 发布时间 2012-02-23

昨天在项目中遇到要在一个输入框中使用缩进的情况,要用text-indent首行缩进2个文字。然后发现在webkit下,在输入框内容为空的时候,光标位置没有缩进,还是在行首,输入任意字符后,缩进才被激活。

HTML代码如下:

1
<input type="text" style="text-indent:2em" />

查看demo

这里无论是input元素还是textarea,或是其它设置了contentEditable=”true”的元素,都能必现这个bug。

IE各版本,Firefox均正常,只有chrome和safari等webkit内核的浏览器才有这个问题。

这里百思不得其解,也尝试了很多方法,均无效。

后来和小李刀刀poor聊到这个问题,突然想到:empty伪类,立刻测试,果然可以解决——虽然只是曲线模拟解决…

1
input[type="text"]:empty{padding-left:2em;}

然后在chromium社区提交了个bug单,不知道会不会被无视。

PS:Opera在这里也有些小问题,input元素缩进表现正常,textarea元素不支持缩进,contentEditable=”true”元素和webkit表现一样。

http://www.qianduan.net/fixed-text-indent-in-webkit-editable-element-bug.html

凌众科技专业提供服务器租用、服务器托管、企业邮局、虚拟主机等服务,公司网站:http://www.lingzhong.cn 为了给广大客户了解更多的技术信息,本技术文章收集来源于网络,凌众科技尊重文章作者的版权,如果有涉及你的版权有必要删除你的文章,请和我们联系。以上信息与文章正文是不可分割的一部分,如果您要转载本文章,请保留以上信息,谢谢!

分享到: 更多

Copyright ©1999-2011 厦门凌众科技有限公司 厦门优通互联科技开发有限公司 All rights reserved

地址(ADD):厦门软件园二期望海路63号701E(东南融通旁) 邮编(ZIP):361008

电话:0592-5908028 传真:0592-5908039 咨询信箱:web@lingzhong.cn 咨询OICQ:173723134

《中华人民共和国增值电信业务经营许可证》闽B2-20100024  ICP备案:闽ICP备05037997号