巧用:empty解决webkit核心浏览器text-indent的bug

神飞 发表于 20. Apr, 2011, 分类: Tips , 23 条评论 »
标签：bug & WebKit

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

HTML代码如下：

1

<input type="text" style="text-indent:2em" http://www.qianduan.net> 查看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表现一样。 作者: 神飞 爱好前端设计与开发，崇尚一目了然的设计。现居深圳，就职于腾讯ISUX团队 Follow me on twitter @qianduan。 如果你喜欢本文，欢迎 订阅本站 以获得本站最新内容。 您或许也会喜欢： 使用CSS修正一切：20多个常见Bug及其修正方法 IE bug: 消失的绝对定位元素 IE bug: 1像素的dottedhttp://www.qianduan.netdashed边框 用于WebKit的CSS诀窍 mac下网页中文字体优化 修正IE6的bug的10个技巧 CSS自定义滚动条样式 webkit对于CSS3渐变样式语法的更新 自定义webkit搜索框样式 反webkit之战 23 个评论 小李刀刀 发表于Apr 20, 2011 at 16:24 V5！！ 回复 adengweb 发表于Apr 20, 2011 at 16:49 飞哥威武。！ 回复 fireyy 发表于Apr 20, 2011 at 17:16 这样 placeholder 的文字还是没有被缩进… 回复 神飞 发表于Apr 20, 2011 at 23:22 是的，不过可以用属性选择器或者::-webkit-input-placeholder来解决，囧，又复杂了～～ 回复 fireyy 发表于Apr 21, 2011 at 11:17 我的 chrome 12.0.733.0 dev 用 ::-webkit-input-placeholder 只能定义 文字 样式而已，不支持 margin padding text-indent 等 回复 丸子 发表于Apr 20, 2011 at 18:18 解决了都不到后宫汇报下 回复 wo_is神仙 发表于Apr 20, 2011 at 21:47 为什么不用padding呢 回复 ZH CEXO 发表于Apr 20, 2011 at 21:52 padding会对整个textarea起效，而不是单单第一行吧 回复 ZH CEXO 发表于Apr 20, 2011 at 21:50 demo在Firefox4下，第二个框还是会出现问题 回复 natsu 发表于Apr 21, 2011 at 10:51 我也是用ff4 第二个框還是有問題 回复 两三点 发表于Apr 21, 2011 at 15:13 这都行“` 总算又见到一个webkit的bug了，很少发现啊。。。LZ V5 回复 刀侠剑客 发表于Apr 24, 2011 at 10:13 FF4下好像第二个框并没有缩进 回复 vimest 发表于Apr 28, 2011 at 15:14 如果这写这句：input[type="text"]:empty{padding-left:2em;}，就只有支持这些选择器的浏览器能显示咯，如果只有text-indent:2em,又会出现上面说的问题，在webkit下没缩进，但如果两个声明都写，启不会是出现是4em? 回复 lovedota 发表于May 6, 2011 at 07:44 貌似IE6也有这个问题！ 回复 馨馨 发表于May 17, 2011 at 11:51 不对啊，我在chrome safari中测试，缩进正常啊。 回复 lala 发表于May 27, 2011 at 18:07 可以 回复 Travis 发表于May 28, 2011 at 00:29 我最近也发现了这个bug。 回复 乐乐行 发表于Jun 10, 2011 at 23:22 太棒了。 回复 木白 发表于Jul 7, 2011 at 19:40 对不起，同馨馨一样在11.50的opera下测试没有这个问题： text-indent显示缩进正常 回复 神飞 发表于Jul 7, 2011 at 21:58 可能opera 11.50修正了，11.10有这个问题 回复 木白 发表于Jul 8, 2011 at 15:04 哦 谢谢回复 回复 gafish 发表于Sep 30, 2011 at 14:29 chrome14表示有这个问题，而且 input[type="text"]:empty{padding-left:2em;} 加上后，input里写了内容同样生效，叠加了2em，会出现4em的情况。 回复 锐风 发表于Nov 14, 2013 at 16:24 Chrome 31 测试, textarea:empty { padding-left: 2em } 会导致所有行前都缩进 回复 发表评论 昵称 (必填) EMail (必填) (不会被泄露) 个人网站 <http://www.qianduan.nettextarea> <http://www.qianduan.netdiv> <div > <input name="submit" type="submit" tabindex="8" value="提交" http://www.qianduan.net>取消回复<http://www.qianduan.neta> <input type='hidden' name='comment_post_ID' value='12436' http://www.qianduan.net> <input type='hidden' name='comment_parent' value='0' http://www.qianduan.net> <http://www.qianduan.netdiv> <p style="display: none;"><input type="hidden" name="akismet_comment_nonce" value="31a39f2a91" http://www.qianduan.net><http://www.qianduan.netp> <http://www.qianduan.netform> <http://www.qianduan.netdiv> <http://www.qianduan.netdiv> <http://www.qianduan.netdiv></div> <section class="am-panel am-panel-default"> <header class="am-panel-hd"> <h3 class="am-panel-title">随意打赏</h3> </header> <div class="am-panel-bd"> <center><div id="cyReward" role="cylabs" data-use="reward"></div> </center> </div> </section> </article> <div class="am_news_list_all_center" > <ul class="am-list" > <li class="am-g am-list-item-desced am_list_li" data-am-collapse="{parent: '#accordion', target: '#do-not-say-1'}"> <center> 评论 </center> </li> </ul> <div id="do-not-say-1" class="am-panel-collapse am-collapse" > <ul class="am-list"> <li class="am-g am-list-item-desced am_list_li"> <!-- UY BEGIN --> <div id="uyan_frame"></div> </li> </ul> </div> </div><!-- en am_news_list_all_center --> <footer class="am_footer"> <div class="yindao"> <p>高效读科技，用关键词过滤资讯，等你加入</p> <a href="http://www.kejilie.com/unread.html" target="_blank" id="yindaolink" rel="nofollow"> 马上加入 </a> </div> <div class="yindao-hr"></div> <div class="am_footer_con" > <div class="am_footer_don"> <dt><img src="/img/logom.png" alt="科技猎"></dt> <dd>专注科技资讯挖掘，通过关键词过滤科技资讯，提高阅读效率10倍以上。 网站定位极少数高效能人士，精准快速定位资讯，大大提高阅读效率。 </div> </div> <div class="so-footerlink"> <p> <a href="http://www.kejilie.com/about.html" title="科技猎" rel="nofollow" >关于我们</a> <a href="http://www.kejilie.com/contact.html" title="联系我们" rel="nofollow">联系我们</a> <a href="http://www.kejilie.com/joinus.html" title="加入我们" rel="nofollow">加入我们</a> <a href="http://www.kejilie.com/links.html" title="友情链接" rel="nofollow">友情链接</a> <!-- <a href="http://www.kejilie.com/donate.html" title="捐助我们" rel="nofollow">捐助我们</a>--> <a href="http://www.kejilie.com/longword.html" title="最新TAG" rel="nofollow" >最新TAG</a> </p> </div> <div class="am_info_line"> CopyRight©2012-2019    科技猎    keji<span>L</span>ie.com    京公网安备 11010602030041号    <a href="https://beian.miit.gov.cn" target=_blank>京ICP备09085575号-7</a></div> </footer> <a target="_blank" onclick="_czc.push(['_trackEvent','用户调查','右下角']);" href="http://cn.mikecrm.com/amttlxP" style="position:fixed;z-index:999;right:15px;bottom: 70px;display: inline-block;width: 20px;border-radius: 5px;color:white;font-size:14px;line-height:17px;background: #2476CE;box-shadow: 0 0 5px #666;word-wrap: break-word;padding: 10px 1px;border: 2px solid white;">提交建议</a> <div data-am-widget="gotop" class="am-gotop am-gotop-fixed am-active"> <a href="#top" title="回到顶部" class="am-icon-btn am-icon-arrow-up" rel="nofollow"></a> </div> <!--share--> <div id="so-share" onmouseout='sharehidden()' onmouseover='stopTime();' style="display: none;position: absolute;top: 50%;left: 50%;" class="share-popover"> <span class="arrow"></span> <div class="share"> <a href="#" onclick="share(this)" title="分享到新浪微博" data-share="weibo" class="share-btn s-weibo"></a> <a href="#" onclick="share(this)" title="分享到腾讯微博" data-share="tencent" class="share-btn s-tcweibo"></a> <a href="#" onclick="share(this)" title="分享到QQ空间" data-share="qzone" class="share-btn s-qzone"></a> <a href="#" onclick="share(this)" title="分享到人人网" data-share="renren" class="share-btn s-renren"></a> </div> </div> <!--shoucangtishi--> <div id="shoucangtishi" class="am-badge am-badge-warning am-text-lg am-round" style="display: none;position:absolute;z-index:100;top:50%;left:50%;"> </div> <!--weixin erweima--> <div class="am-modal am-modal-alert" tabindex="-1" id="weixinbox"> <div class="am-modal-dialog"> <div class="am-modal-hd">微信扫一扫，分享给好友吧。</div> <div class="am-modal-bd" id="weixinpic" > </div> <div class="am-modal-footer"> <span class="am-modal-btn">关闭</span> </div> </div> </div> <!--[if lt IE 9]> <script src="/js/killie.js"></script> <script src="http://cdn.bootcss.com/amazeui/2.7.0/js/amazeui.ie8polyfill.min.js"></script> <script src="http://cdn.bootcss.com/amazeui/2.7.0/js/amazeui.widgets.helper.min.js"></script> <script src="http://cdn.bootcss.com/handlebars.js/4.0.5/handlebars.min.js"></script> <![endif]--> <script src="http://cdn.bootcss.com/jquery/2.2.3/jquery.min.js"></script> <script type="text/javascript">var jQuery=$;</script> <!-- 解决jquery和其他引入的JS冲突 --> <script src="http://cdn.bootcss.com/amazeui/2.7.0/js/amazeui.min.js"></script> <script type="text/javascript" src="/js/prompt.js?v=1.1"></script> <script type="text/javascript" src="/js/app.js?v=1.7"></script> <script>var _hmt = _hmt || [];(function() { var hm = document.createElement("script"); hm.src = "//hm.baidu.com/hm.js?123b569b6ae27e29fadbfdb2c1f43901"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(hm, s);})();</script> <script type="text/javascript">var cnzz_protocol = (("https:" == document.location.protocol) ? " https://" : " http://");document.write(unescape("%3Cspan id='cnzz_stat_icon_1260590285'%3E%3C/span%3E%3Cscript src='" + cnzz_protocol + "w.cnzz.com/q_stat.php%3Fid%3D1260590285' type='text/javascript'%3E%3C/script%3E"));</script> <script><!--百度提交--> (function(){ var bp = document.createElement('script'); var curProtocol = window.location.protocol.split(':')[0]; if (curProtocol === 'https') { bp.src = 'https://zz.bdstatic.com/linksubmit/push.js'; } else { bp.src = 'http://push.zhanzhang.baidu.com/push.js'; } var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(bp, s); })(); </script> <script><!--360提交--> (function(){ var src = (document.location.protocol == "http:") ? "http://js.passport.qihucdn.com/11.0.1.js?4054411330fc00b0202d43f36579d12c":"https://jspassport.ssl.qhimg.com/11.0.1.js?4054411330fc00b0202d43f36579d12c"; document.write('<script src="' + src + '" id="sozz"><\/script>'); })(); </script> <!-- zhuge --> <script> $('#yindaolink').click(function(){ zhuge.track("底部引导猎物"); }); </script> <script type="text/javascript" charset="utf-8" src="https://changyan.sohu.com/js/changyan.labs.https.js?appid=cytgHGfGU"></script><!-- dashang --> <!-- UY BEGIN --> <script type="text/javascript" src="http://v2.uyan.cc/code/uyan.js?uid=1836051"></script> <script type="text/javascript"> function Fpop(a){ } function Fhidden(){} zhuge.track("第一次访问内容页"); $('#zhuge_guangaoyindao').click(function(){ zhuge.track("广告引导"); }); $('.zhuge_yanshenyuedu').click(function(){ zhuge.track("延伸阅读"); }); </script> </body> </html>