移动端HTML5 输入框padding-left会导致放大

移动端HTML5 输入框padding-left会导致放大

解决办法：

input { width: calc(100% - 10px); padding-left: 10px; } 

目前而言，好的解决之道是width和padding均采用百分比值，例如下面这样：

firefox低版本可能存在问题

input { width: 92%; padding-left: 4%; padding-right: 4%; }

IE低版本可能会存在问题

input { width: 100%; text-indent: 4%; }
语法：
   
   

    
    
calc() = calc(四则运算)
   
   
说明：
   
   

    
    用于动态计算长度值。
    
    
需要注意的是，运算符前后都需要保留一个空格，例如：width: calc(100% - 10px)；
任何长度值都可以使用calc()函数进行计算；
calc()函数支持 "+", "-", "*", "/" 运算；
calc()函数使用标准的数学运算优先级规则；
   
   
兼容性：
   
   

    
    
浅绿 = 支持
红色 = 不支持
粉色 = 部分支持
    
    
IE
Firefox
Chrome
Safari
Opera
iOS
 Safari
Android Browser
Android
 Chrome
6.0-8.0
2.0-3.6
4.0-18.0
3.1-5.1
15.0+
3.2-5.1
2.1-4.3
18.0
9.0+
4.0-15.0 -moz-
19.0-25.0 -webkit-
6.0 -webkit-
6.0-6.1 -webkit-
4.4-4.4.4
19.0-25.0 -webkit-
16.0+
26.0+
6.1+
7.0+
26.0+

   
   
calc()的运算规则
calc()使用通用的数学运算规则，但是也提供更智能的功能：
   
   
使用“+”、“-”、“*” 和 “/”四则运算；
可以使用百分比、px、em、rem等单位；
可以混合使用各种单位进行计算；
表达式中有“+”和“-”时，其前后必须要有空格，如"widht: calc(12%+5em)"这种没有空格的写法是错误的；
表达式中有“*”和“/”时，其前后可以没有空格，但建议留有空格。
浏览器的兼容性
浏览器对calc()的兼容性还算不错，在IE9+、FF4.0+、Chrome19+、Safari6+都得到较好支持，同样需要在其前面加上各浏览器厂商的识别符，不过可惜的是，移动端的浏览器还没仅有“firefox for android 14.0”支持，其他的全军覆没。
大家在实际使用时，同样需要添加浏览器的前缀
 .elm {
	/*Firefox*/
	-moz-calc(expression);
	/*chrome safari*/
	-webkit-calc(expression);
	/*Standard */
	calc();
 }