input元素有padding间距,所以使用box-sizing来保持宽度不超出父元素
http://vicbeta.com/code/2013/04/24/phone-over-width.html
手机web开发资料少,原创解决方案Mark。
手机页面遇到一个横竖屏切换时出现的问题。为满足不同分辨率下正常显示,页面的input元素宽度需要撑满整个父级元素,而父级元素则是占满整行的,由于input元素有padding间距,所以使用box-sizing来保持宽度不超出父元素,代码如下:
- <inputtype="text"class="text_input w_100"name="phone"id="phone"/>
- .text_input {
- box-sizing: border-box;
- padding:.8em;
- border:1px solid #E2E2E3;
- background:#FFF;
- font: normal 16px/1'SimHei';
- border-radius:3px;
- outline: none;
- }
- .w_100 {
- width:100%;
- }
竖屏打开时页面显示正常
出处:http://cnblogs.com/daishuguang