文字输入在我的iPhone上有1个像素差异

Question

我的一个登录和注册表单存在这个恼人的问题。在我的手机上输入的表格长1px，我不确定为什么

桌面VS移动

我知道有人登录并注册，但这是无关紧要的，所以不要担心两种形式上的差异相同

这是我的LESS代码

@inputradius: 4px;

input{
  &[type=text], &[type=email], &[type=password]{

    font-size: 14px;
    padding: 4.5px;
    border: 1px solid #000;
    border-radius: @inputradius;
    &.noleft{
      border-top-left-radius: 0;
      border-bottom-left-radius: 0;
    }
  }
}

.inputimg{
  border-top-left-radius: @inputradius;
  border-bottom-left-radius: @inputradius;
  padding: 4px;
  top: 10px;
  position: relative;
  border: 1px solid #000;
  border-right: none;
}

我的html for the bit

<div class="control">
   <img class='inputimg' src="images/inputs/username.png"><input placeholder="Username" class="noleft" type="text" name="username" value="{{ Request::old('username') }}"/>
</div>
<div class="control">
   <img class="inputimg" src="images/inputs/email.png"><input placeholder="Email" class="noleft" type="email" name="email" value="{{ Request::old('email') }}"/>
</div>
<div class="control">
   <img class="inputimg" src="images/inputs/password.png"><input placeholder="Password" class="noleft" type="password" name="password"/ value="{{ Request::old('password') }}">
</div>

即使代码笔也显示不同 http://codepen.io/albermashy/pen/LNaEEG

Answer 1

将它添加到输入字段，它应该没问题：

height:30px;
box-sizing:border-box;

当您向对象添加边框时，通常会在框的内容之外添加边框，从而使其实际高度为22像素，而不是20.使用border-box边框时在容器的高度参数内添加。

由于这个数学公式，你的图像的实际高度为30：

高度20px + 4px填充底部+ 4px填充顶部+ 1px边框顶部+ 1px边框底部。

修改

如果浮动元素对于其余设置没有问题，可以在图像和输入中添加box-sizing：border-box，然后将它们浮动。这将解决两者之间的偏移问题，您不必使用top:10px;

总css：

@inputradius: 4px;

input{
  &[type=text], &[type=email], &[type=password]{
    font-size: 14px;
    padding: 4.5px;
    border: 1px solid #000;
    border-radius: @inputradius;
    height: 30px;
    box-sizing:border-box;
    float:left;
    &.noleft{
      border-top-left-radius: 0;
      border-bottom-left-radius: 0;
    }
  }
}
.control {
  clear:both;
  padding:20px 0;
}
.inputimg{
  border-top-left-radius: @inputradius;
  border-bottom-left-radius: @inputradius;

  position: relative;
  border: 1px solid #000;
  border-right: none;
  height: 30px;
  box-sizing:border-box;
  float:left;
}

Answer 2

抱歉，我想念这个问题，我的错误

这似乎是一个解决此问题的iPhone呈现问题，只是给它一个确切的height，你给了表格一个.noleft的类，但你还没有在CSS中做任何事情< / p>

将height:27px添加到该类，这应解决问题

试试这个：

.inputimg{
  border-top-left-radius: @inputradius;
  border-bottom-left-radius: @inputradius;
  padding: 3px;
  top: 3px;
  position: relative;
  border: 1px solid #000;
  border-right: none;
}

.noleft {
  height: 27px;
  margin-top: 15px;
}