zoukankan      html  css  js  c++  java
  • 巧用:empty解决webkit核心浏览器text-indent的bug

     

    昨天在项目中遇到要在一个输入框中使用缩进的情况,要用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表现一样。

     

  • 相关阅读:
    jQuery_第一章_JavaScript基础
    呵呵双钻
    MINIDVD
    幸运抽奖
    三章
    复习
    三种循环
    百文买百鸡
    1~100的奇数和
    Python memcache和redis
  • 原文地址:https://www.cnblogs.com/cuoreqzt/p/3955993.html
Copyright © 2011-2022 走看看