一个输入框在iPhone上的边框问题

Question

今天在做一个项目的时候,遇到了一个问题,各种调试,都无法解决,所以想问问有遇到过类似问题或者了解该问题的大神帮忙解决.情况如下:
1.项目截图(iPhone4上的效果):

2.项目HTML结构(chrome上的截图):

3.项目CSS样式:
body {

            width:100%;
            overflow:hidden;
            margin:0;
            padding:0;
            background: #E6E6E6;
            overflow-y: scroll;
        }
        .info_top {
            padding:10px;
            background:#FFFFFF
        }
        .info_Etext {
            /*padding: 0 5px;*/
            overflow: hidden;
        }
        .price_area {
            position:relative;
            width:90%;
            border:1px solid#89C2DA;
            border-radius:5px;
            margin: 0 auto;
        }

.screen {

            width:95%;
            height:40px;
            color:#58851A;
            line-height:40px;
            border: none;
            text-indent:10px;
            font-size:20px;
            font-weight:bold;
            display: block;
            margin: 0 auto;
        }

4.Chrome上的截图(正常的):

可以很清晰的看到,输入框的样式有问题--右边的边框被吃掉了,我做了各种修改,还是无法解决:
甚至我都没有把边框加在input框上,而是加在了它的父元素.price_area上,并且还把它的宽度设置成95%,结果仍然还是存在图4 和图1 的强烈反差.网各位看官不吝赐教

Answer 1

你通过Safari浏览器连接iPhone真机调试，那样容易找到问题，我感觉你这应该是宽度啥的没处理好被遮挡了

Answer 2

应该是 1PX 在手机上被当做了 2px 并且 外部盒子的 overflow : hidden 造成的

Answer 3

加上

box-sizing: border-box;