html - 文本输入在我的 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 代码

<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 底部边框。

编辑:

如果 float 元素对其余设置没有问题，您可以将 box-sizing:border-box 添加到图像和输入中，然后让它们 float 。这将解决两者之间的偏移问题，并且您不必使用 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;
}