总的来说,text-indent不影响元素的最终宽度但是有兼容性问题,padding-left在中国主流浏览器IE低版本下影响最终宽度,但在chrome和firefox下不影响宽度,但是可以通过CSS reset解决多浏览器显示不一的问题,使得他们最终都影响宽度。


text-indentpadding-left的基本区别:

  • padding-left基于盒模型,适用于inline和block层级的元素
  • text-indent基于行内排版,仅仅适用于block层级的元素,作用于block层级的元素的内部第一行文字

几乎他们所有的表现区分都是这二者的区分。

padding-left会作用于inline框block框的左侧padding区域,会影响到content-box,而文字子节点会出现在content-box内部,因此所有文字都会左移。

text-indent会作用于block框的第一行文字。无论是文字超过容器的宽度被white-space的相应规则截断,还是文字中的回车被white-space的相应规则保留,最终导致第二行第三行第N行出现,后面的第二行第三行第N行都不会应用到相应的indent。text-indent的目的很纯净,就是为了模拟现实排版需求中的首行缩进效果。

http://jsfiddle.net/humphry/3bSSX/点击预览


<input type="text">作为一个inline-block层级的标签,它是固定单行显示的(而且还和white-space机制不一样),上面所述区别并不存在。

那么区别在哪里呢:

  1. text-indent基于行内排版,导致应用了direction: rtl之后,text-indent提供的indent出现在右侧;padding-left则不受direction影响。 当然,direction这个属性不常用于<input type="text">

  2. padding-left基于盒模型,所以box-sizing属性会和padding-leftwidth属性一同影响到元素的最终宽度;而text-indent则始终不会影响元素的宽度。 这很重要,因为webkit和firefox的默认样式表里,会设置input元素的box-sizing: border-box,若你同时设置了widthpadding-left,会出现webkit/firefox和IE低版本的很大的宽度区别。 因此,用到padding-left时,需要重置webkit和firefox的相应样式:

input[type=text] { box-sizing : content-box; -moz-box-sizing : content-box; }

重置样式之后,在所有浏览器里面,有效的padding-left在所有情况均会加到元素的最终宽度上,如上面jsfiddle所示。这是需要额外考虑的事情。


至于前一个回答的text-indent的兼容性问题,出现在IE6/7中,一个原生的inline-block元素会被text-indent拐跑: http://jsfiddle.net/humphry/9zKjL/点击预览

IE6(VirtIE6模拟):

chrome:

把它转化为block层级即可解决这个问题: http://jsfiddle.net/humphry/9zKjL/4/点击预览

当然,这个时候,它不能和其他文字混排了。

input的width和padding-left同时存在时IE兼容问题的更多相关文章

  1. input 设置 width:100% 和padding后宽度超出父节点

    input 设置 width:100% 和padding后宽度超出父节点 添加如下css即可: box-sizing: border-box; -webkit-box-sizing: border-b ...

  2. Libx264 编码错误 Input picture width(320) is greater than stride (0)

    Ffmpeg libx264编码出现 Input picture width(320) is greater than stride (0),问题出在视频格式不正确. libx264 编码要求输入源的 ...

  3. CSS3 盒模型---css初始化会用到:box-sizing: border-box 盒子大小为 width 就是说 padding 和 border 是包含到width里面的

    CSS3中可以通过box-sizing 来指定盒模型,即可指定为content-box.border-box,这样我们计算盒子大小的方式就发生了改变. 可以分成两种情况: 1.box-sizing: ...

  4. select的width和input的width

    select的width包括了border,而input不包括

  5. 关于width与padding

    http://blog.csdn.net/yaoyuan_difang/article/details/24735529

  6. 关于input标签和placeholder在IE8,9下的兼容问题

    一. input常用在表单的输入,包括text,password,H5后又新增了许多type属性值,如url, email, member等等,考虑到非现代浏览器的兼容性问题,这些新的type常用在移 ...

  7. input输入框的border-radius属性在IE8下的完美兼容

    在工作中我们发现搜索框大部分都是有圆角的,为此作为经验不足的前端人员很容易就想到,给input标签添加border-radius属性不就解决了嘛.不错方法确实是这样,但是不要忘了border-radi ...

  8. jQuery如何判断input元素是否获得焦点(点击编辑时)

    问题提出 如果你要判断input元素是否获得焦点,或者是否处在活动编辑状态,使用jQuery的 hasFocus() 方法或 is(':focus') 方法貌似都无效!搜索网上给出的办法,几乎净是采用 ...

  9. input框设置onInput事件只能输入数字,能兼容火狐IE9

    使用onInput()事件 onInput()是 HTML5 的标准事件,对于检测 textarea, input:text, input:password 和 input:search 这几个元素通 ...

随机推荐

  1. 可以改变文本行距(行间距)的Label

    ////////////////////////////////////////////////////// /// ///功能:可以改变文本行距(行间距)的Label ///作者:emanlee / ...

  2. JDK5什么是新的堵塞队列线程(四)

    一. 堵塞队列与普通队列: 队列是一种主要的数据类型,其典型特征是先进先出. 堵塞队列和普通队列的差别在于: 当队列为空时.从队列中获取元素的线程会被堵塞.直到其它的线程往空的队列里插入新的元素: 当 ...

  3. 【剑指offer】面试题39:深度二叉树

    def TreeDepth1(root): if None == root: return 0 if None == root.left and None == root.right: return ...

  4. MS Open Tech 技术团队构建可靠的Windows版Redis

    可靠的Windows版Redis 副标题: 评论更精彩,教你怎么解决64位Windows版Redis狂占C盘的问题. MS Open Tech 技术团队最近花了很多时间来测试最新构建的Windows版 ...

  5. Cocos2d-x 3.0final 终结者系列教程04-引擎架构分析

    从前,有一个跟我来Android学生,总是问我: 沉老师,为什么Android的形式被称为Activity,为什么要onCreate方法写setContentView(R.layout.main)? ...

  6. nodeJs基础

    Node.js 是一个基于Chrome JavaScript 执行时建立的一个平台, 用来方便地搭建高速的 易于扩展的网络应用· Node.js 借助事件驱动, 非堵塞I/O 模型变得轻量和高效, 很 ...

  7. DM8168 新三板系统启动

    DM8168从补丁到系统的新董事会开始折腾了20天,最终完成,高校是累的东西,导师只焊接机10一个BGA,其他人则手. 前段时间启动操作系统时,到了Starting Matrix GUI applic ...

  8. FZU 1686 龙之谜 重复覆盖

    兑换0,1模型,如.注意,数据的范围 #include <stdio.h> #include <string.h> #include <iostream> #inc ...

  9. Android视频通话Java代码

      近期学习Android平台下跨平台音视频通信开发,尽管网上有非常多开源项目供我们參考学习.但音视频效果非常一般,还有非常多不稳定的因素,毕竟是开源嘛.在国内我找到了一个比較好音视频通信解决方式(百 ...

  10. Behavioral模式之Observer模式

    1.意图 定义对象间的一种一对多的依赖关系,当一个对象的状态发生改变时,全部依赖于它的对象都得到通知并被自己主动更新. 2.别名 依赖(dependents).公布-订阅(Publish-Subscr ...