在 Chrome 中变换偏移输入边框

Question

我正在制作一个网页，我需要在页面中央水平和垂直对齐 div 和 input。但是当我测试代码时，它呈现了一些我没有预料到的东西。

body {
  background: white;
  margin: 0;
  padding: 0;
  font-family: Source Sans Pro;
  line-height: 160%;
}

div {
  position: absolute;
  background: #E6E6E6;
  padding: 15px;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
}

<div><input /></div>

我在 Chrome 和 Firefox 中测试过，但这个错误只发生在 Chrome 中。这有什么原因吗？我该如何解决？

Answer 1

默认情况下，input 元素的样式设置为 inset 值：

试试这个：

input { border: 1px solid gray; }

body {
  background: white;
  margin: 0;
  padding: 0;
  font-family: Source Sans Pro;
  line-height: 160%;
}

div {
  position: absolute;
  background: #E6E6E6;
  padding: 15px;
  left: 50%;
  top: 50%;
   -webkit-transform: translate(-50%, -50%);
   transform: translate(-50%, -50%);
}

<div><input /></div>

在 Chrome 中变换偏移输入边框

Transform offsets input border in Chrome

css

webkit

google-chrome