这是我在写登陆框时发现的问题，我发现输入框的上边框好像消失了一样
image
然后经过在网上的查找，终于找到了原因
原因是因为变换：translate（-50％， - 50％）;，这好像是windows chrome的一个bug
在我把这句话去除之后就发现输入框恢复了正常的样子，但是去掉这句话之后原先的定位居中就会消失了
那么我们如何在不删除translate（-50％， - 50％）的情况下，让输入框的上边框出现呢？
我们可以为输入框添加一个上边框
.input input[type=text]{
width:100%;
padding: 10px 10px 10px 23px;
outline:none;
border: 1px solid #aaa;
}
还可以使用transform: transform: translate(-50%, -50%) perspective(1px);来让边框出现
或者在父元素上面添加
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
transform-style: preserve-3d;
参考自：https://stackoverflow.com/questions/42151075/input-top-border-disappears-in-windows-chrome
网友评论