移动端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()函数使用标准的数学运算优先级规则；

兼容性：

浅绿 = 支持红色 = 不支持粉色 = 部分支持 IEFirefoxChromeSafariOperaiOS SafariAndroid BrowserAndroid Chrome6.0-8.02.0-3.64.0-18.03.1-5.115.0+3.2-5.12.1-4.318.09.0+4.0-15.0 ^-moz-19.0-25.0 ^-webkit-6.0 ^-webkit-6.0-6.1 ^-webkit-4.4-4.4.419.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(); }