巧用:empty解决webkit核心浏览器text-indent的bug
浏览数：42 /
时间：2015年06月09日
昨天在项目中遇到要在一个输入框中使用缩进的情况，要用text-indent首行缩进2个文字。然后发现在webkit下，在输入框内容为空的时候，光标位置没有缩进，还是在行首，输入任意字符后，缩进才被激活。
HTML代码如下：
<input type="text" style="text-indent:2em" />
这里无论是input元素还是textarea，或是其它设置了contentEditable=”true”的元素，都能必现这个bug。
IE各版本，Firefox均正常，只有chrome和safari等webkit内核的浏览器才有这个问题。
这里百思不得其解，也尝试了很多方法，均无效。
突然想到:empty伪类，立刻测试，果然可以解决——虽然只是曲线模拟解决…
input[type="text"]:empty{padding-left:2em;}
PS：Opera在这里也有些小问题，input元素缩进表现正常，textarea元素不支持缩进，contentEditable=”true”元素和webkit表现一样。
郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
