巧用: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表现一样。

时间: 2024-10-07 21:52:26

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

CSS gradient渐变之webkit核心浏览器下的使用以及实例

一.关于渐变 渐变是一种应用于平面的视觉效果,可以从一种颜色逐渐地转变成另外一种颜色,故可以创建类似于彩虹的效果渐变可以应用在任何可以使用图片的地方.例如,您可以指定一个这么一个渐变:顶部的颜色是红色,中间的是蓝色,底部为黄色来作为div的背景色.渐变通过-webkit-gradient方法实现,可以用来代替图片URL.在webkit核心浏览器下(Safari4+, Chrome),有两种类型的渐变,线性的和径向的.您还可以指定多个中间过渡色,此称之为color stops. 二.基本语法 we

基于.net开发chrome核心浏览器【三】

原文:基于.net开发chrome核心浏览器[三] 本篇我们讲解怎么用CefGlue开发一个最简单的浏览器 一: CefGlue是建立在Cef项目之上的,Cef项目是C/C++的项目:CefGlue只不过是通过PInvoke来访问Cef项目生成的一些dll下面我们来看看Cef项目生成的一些dll和资源都是做什么用的打开这个目录\cef_binary_3.1453.1236_windows_xilium\Releaselibcef.dll-------------------------->Cef

八大Webkit内核浏览器

列举出时下最流行的Webkit内核浏览器,所以我们并不会做出评测和对比.PS:本文列举的浏览器有一部分为IE+Webkit双核浏览器,如果您对其他IE内核浏览器很感兴趣<抛弃数据!用体验和感觉告诉你什么才是最好用的浏览器!>一文可能会对你有所帮助.尖端技术的Webkit内核WebKit 是一个开源的浏览器引擎,与之相对应的引擎有Gecko(Mozilla Firefox 等使用)和Trident(也称MSHTML,IE 使用).同时WebKit 也是苹果Mac OS X 系统引擎框架版本的名称

基于.net开发chrome核心浏览器【一】(转)

http://www.cnblogs.com/liulun/archive/2013/03/18/2874276.html 说明: 这是本系列的第一篇文章,我会尽快发后续的文章. 源起 1.加快葬送IE6浏览器的进程 世界上使用IE6浏览器最多的地方在中国 中国使用IE6浏览器最多的地方在企业中 让他们自己去装个chorme太难了 索性开发个浏览器(其实是浏览器的外壳)给他们 用"代码改变世界"是博客园园友的口号 2.一劳永逸的解决浏览器兼容问题 各种浏览器的CSS hack问题再也不

基于.net开发chrome核心浏览器【一】

原文:基于.net开发chrome核心浏览器[一] 说明: 这是本系列的第一篇文章,我会尽快发后续的文章. 源起 1.加快葬送IE6浏览器的进程 世界上使用IE6浏览器最多的地方在中国 中国使用IE6浏览器最多的地方在企业中 让他们自己去装个chorme太难了 索性开发个浏览器(其实是浏览器的外壳)给他们 用"代码改变世界"是博客园园友的口号 2.一劳永逸的解决浏览器兼容问题 各种浏览器的CSS hack问题再也不用担心了 甚至公司里前端的职位也可以减少几个了 3.更方便的使用更强大的

基于.net开发chrome核心浏览器【四】

原文:基于.net开发chrome核心浏览器[四] 一: 上周去北京出差,给国家电网的项目做架构方案,每天都很晚睡,客户那边的副总也这样拼命工作. 累的不行了,直接导致第四篇文章没有按时发出来. 希望虚心学习1,小侠客等关注我的朋友们原谅我. 二: 在这篇文章中,我们主要实现下面三个功能: 浏览器地址栏.浏览器窗口大小变化.浏览器下载文件 为了实现这三个功能,我们新创建了一个工程, program.cs文件里的内容没有任何变动: dll文件夹里的内容没有任何变动: 资源的引用,程序集的配置,都没

基于.net开发chrome核心浏览器【五】

原文:基于.net开发chrome核心浏览器[五] 一:本篇将解决的问题 本章主要为了解决一下几个问题: 1.JsDialog的按钮错位的问题 我们开发出的浏览器,在有些操系统上调用alert,confirm之类的对话框时,确定和取消按钮会出现错位的情况 2.右键菜单问题 我们开发的浏览器,在网页上点右键,会出现一些讨厌的英文菜单. 3.打印的问题 我们开发的浏览器,网页在调用window.print的时候,没有任何反应. 4.打开chrome的调试器 谷歌浏览器调试网页的调试器非常好用,我们开

webkit内核浏览器 手机端 滚动顿卡 处理方法 修改

今天遇到一个问题.因为之前也遇到过,解决了,但是一下子想不起来如何解决 所以,今天就把这个记录一下. 问题是这样: body下的一个容器 section 高度为100%  宽度为100% 即该 父类是和屏幕同宽同高的.但是 section 下的 子标签的 高度超过父标签 此时在手机端的滚动  有可能会滚动顿卡.这其实因为设备是没有启用弹性滚动,或者不支持弹性滚动. 测试一下 1 <!DOCTYPE html> 2 <html lang="en"> 3 <h

基于.net开发chrome核心浏览器【二】

原文:基于.net开发chrome核心浏览器[二] 一: 上一篇的链接: 基于.net开发chrome核心浏览器[一] 二: 相关资源介绍: chrome Frame: 让IE有一颗chrome的心,看起来不错,但我没有深入研究这个东西. http://www.google.com/chromeframe?hl=zh-CN&quickenable=true https://developers.google.com/chrome/chrome-frame/ WebKit.Net 已经有一段时间没