IE边框半径，边框颜色鬼角边框

Question

上午，

我有以下代码，适用于IE以外的所有浏览器。我希望在单击输入框时出现蓝色边框，但是不希望看到元素调整大小和定位。我通过设置边框颜色以匹配背景颜色来修复此问题，从而消除了调整大小效果。但是，在IE上，你会得到鬼边框，它似乎是边框半径和边框颜色（背景颜色）的组合。如何在不使用框阴影的情况下修复此问题的任何想法？

屏幕截图显示鬼境：

input,
textarea,
select {
  position: relative;
  display: block;
  border: 3px solid #4f4f4f;
  border-radius: 10px;
  margin: 6px auto 22px auto;
  width: 260px;
  font-size: 13px;
  text-align: center;
  &:focus {
    outline: none;
    border: 3px solid #4cc7fa;
  }
}

非常感谢！

Answer 1

您可以这样做来克服重影/调整大小/重新定位效果，您可以更改焦点上的border-width并使用负top补偿其重新定位

＆＃13;

＆＃13;

body {
  background: gray;
}

input,
textarea,
select {
  position: relative;
  display: block;
  border: 0px solid gray;
  border-radius: 10px;
  margin: 6px auto 22px auto;
  width: 260px;
  font-size: 13px;
  text-align: center;
}

input:focus {
  top: -3px;
  outline: none;
  border: 3px solid #4cc7fa;
}

＆＃13;

<input type="text">

＆＃13;

＆＃13;

＆＃13;