Question

我将这些输入框的边框宽度设置为1px。但是，出于某种原因，在ios上，顶部边框看起来比它应该更大（无论浏览器如何）。

(border on ios)

在任何其他类型的设备上，边框看起来很好。

(border on non-ios device )

<!DOCTYPE html>
 <html>
  <head>
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,minimum-scale=1">
   <title>ios rendering test</title>
  </head>
  <body>
<style media="screen">
  input {
    border: 1px solid #ccc;
    height: 100px;
    margin: 5%;
  }
</style>
<form class="" action="index.html" method="post">
  <input type="text" name="" value="firstname">
  <input type="text" name="" value="lastname">
  <input type="text" name="" value="email">
  <input type="submit" name="submit" value="subscribe">
</form>
</body>
</html>

Answer 1

由于 iOS input被定位，您需要使用-webkit-appearance: none;

删除默认样式

您的代码

input {
  -webkit-appearance: none; /* Add this */
  border: 1px solid #ccc;
  height: 100px;
  margin: 5%;
}

Here is an article，其中包含有关appearance代码的更多信息。

IOS边框宽度渲染不正确

1 个答案:

您的代码