表单元素内置padding值

发表于 | 分类于

结论

  1. 所有浏览器的input／textarea都有内置padding值。
  2. 所有浏览器的button按钮都有内置padding值。
  3. 部分浏览器select下拉有padding值，比如firefox。ie8+可以设置padding值。
  4. 所有浏览器的radio/checkbox没有padding值。
  5. button元素的padding很奇葩。。。

button元素的padding

  1. chrome ok
  2. firefox ok
  3. ie
    ie7 下文字越多，padding越大，设置button{overflow:visible;}可以解决杀掉多余的padding值

  4. padding高度计算不兼容

    1
    2
    3
    4
    5
    button{
    	line-height:20px;
    	padding:10px;
    	border:none;
    }

    ie7 45px ?
    ie8+ 40px ok
    firefox 42px ?
    chrome 40px ok

    button兼容性不好，大大降低了平时开发中的使用率。平时多用a标签来代替，当需要原生的button按钮时候，建议方案：

    1
    2
    <button id="btn"></button>
    <label for="btn">button</label>
    1
    2
    3
    4
    5
    label{
    	display:inline-block;
    	line-height:20px;
    	padding:10px;
    }

    另外需要设置button的不可访问，非display:none;visible:hidden;而是绝对定位到屏幕之外或者设置z-index为-1,让button元素隐藏在背景色下。

    兼容ie7， ie8+， firefox, chrome.

    参考：标签元素的内置padding–css深入理解之padding-by张鑫旭