Question

code

<div class="center">
  <div class="parent">
    <label>姓名</label>
    <input type="text">
  </div>
</div>


.center {
  transform: translate(-50%, -50%);
  position: absolute;
  top: 50%;
  left: 50%;
}

.parent {
  padding: 8px 0;
}
label {
  margin-left:  20px;
}
input {
  width: 100px;
  height: 41px;
}

我想知道为什么输入的上边框消失了。如果有人回答我，我将不胜感激。

os：win10

浏览器：chrome 51.0.2704.84m

感谢。

Answer 1

问题出现是因为转换：翻译（-50％， - 50％）;

您可以修改css以删除转换

.center {
   position: relative;
   width: 100%;
}
.parent {
   padding: 8px 0;
   margin: 15% auto;
   width: 100px;
}
label {
  margin-left:  20px;
}
input {
  width: 100px;
  height: 41px;
}

Answer 2

这是由元素通过平移变换在子像素上渲染（即：10.5px等）引起的图形故障。

有一些已知的解决方案可以解决这个问题，尽管我没有太多运气：

1）使用WRITE(1001,FS) KMC_ELEMENTS(K1)%IDNUM,KMC_ELEMENTS(K1)%MATID, &
2）在父元素上，添加。

transform: transform: translate(-50%, -50%) perspective(1px);

来源：http://zerosixthree.se/vertical-align-anything-with-just-3-lines-of-css/

如果您不需要旧版浏览器的支持，可以使用flexbox： https://philipwalton.github.io/solved-by-flexbox/demos/vertical-centering/

输入顶部边框在Windows chrome中消失

2 个答案: