Chrome CSS3 Box阴影文本字段问题

Question

在将文字输入应用于文字输入时，是否有人在谷歌浏览器中遇到问题？我有这个模糊的问题，偶尔输入输入时，框阴影似乎加倍。我尝试了几件事，但似乎没有什么可以解决的。最糟糕的是，这个问题非常不一致。我只能半持续地解决这个问题，每次都会重置浏览器缓存。

应用于输入的CSS如下：

input[type=text] {
  padding: 7px 0 7px 10px;
  height: 14px;
  border: 1px solid #dadada;
  -moz-border-radius: 2px;
  -webkit-border-radius: 2px;
  -o-border-radius: 2px;
  -ms-border-radius: 2px;
  -khtml-border-radius: 2px;
  border-radius: 2px;
  -moz-box-shadow: #e4e4e4 4px 5px 10px inset;
  -webkit-box-shadow: #e4e4e4 4px 5px 10px inset;
  -o-box-shadow: #e4e4e4 4px 5px 10px inset;
  box-shadow: #e4e4e4 4px 5px 10px inset;
}

input[type=text]:focus {
  outline: none;   
}

这是代码的JSFiddle。 http://jsfiddle.net/S5xzM/

非常感谢任何见解！

[编辑]目前正在进行的Chrome版本是14.0.835

Answer 1

有趣的问题！

这绝对是一个Webkit错误。只有将outline: none;放在焦点伪选择器上才会发生这种情况。

这是我能找到的唯一解决方法：

input[type=text]:focus {
    outline-color: rgba(255,255,255,0);
    outline-offset: 10px;
}

我尝试了各种方法，例如outline-width: 0或outline-color: transparent，但它们无效。

http://jsfiddle.net/Gvh2L/