iPad上的HTML搜索输入和HTML textarea宽度缩小

Question

我正在使用Bootstrap 3和AngularJs。 我这样做是为了输入type='search'：

<input type="search" class="form-control" id='roomSearch' placeholder="Search" ng-model='qText'>

这对于textarea：

<textarea name='question' id='question' rows='8' ng-model='q.text' class='form-control' ng-maxlength='{{$root.globals.maxLen.med}}' required></textarea>

然而，它在iPhone和台式机的所有主流浏览器中看起来都很好; iPad正在渲染这些字段：

在这里

UPDATE！ 这是搜索框的CSS

     #roomSearch {
       margin-top: 8px;
       float: right;
     }

这是文本区域的css

       .question-form textarea {
       width: 100%;
      } 

Answer 1

我没有看到答案，这已经过时了，所以我猜这位作者想出来了，但这对我有用：

textarea, input {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    width: 100%;
 }

这使得textarea和输入填充了浏览器的整个宽度。