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

来源：互联网发布：研究生发cscd难吗知乎编辑：程序博客网时间：2024/05/21 17:36

解决办法：

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(); }

0 0