input元素有padding间距，所以使用box-sizing来保持宽度不超出父元素

http://vicbeta.com/code/2013/04/24/phone-over-width.html

 

手机web开发资料少，原创解决方案Mark。

手机页面遇到一个横竖屏切换时出现的问题。为满足不同分辨率下正常显示，页面的input元素宽度需要撑满整个父级元素，而父级元素则是占满整行的，由于input元素有padding间距，所以使用box-sizing来保持宽度不超出父元素，代码如下：

1. <inputtype="text"class="text_input w_100"name="phone"id="phone"/>

1. .text_input {
2. box-sizing: border-box;
3. padding:.8em;
4. border:1px solid #E2E2E3;
5. background:#FFF;
6. font: normal 16px/1'SimHei';
7. border-radius:3px;
8. outline: none;
9. }
10. .w_100 {
11. width:100%;
12. }

竖屏打开时页面显示正常