Html 轮廓变成内联-我想是Chrome bug

谁能告诉我为什么谷歌浏览器会出现这种情况

一个轮廓意味着这是一条线，它在某物的外面，对吗？当我专注于输入时，我的大纲变成了“内联”。不应该吧？这在我正在从事的几个项目中都有发生。我使用的是Chrome 19.0.1084.52 m

---

有什么帮助吗？

看起来就是这样。试试看，我把线弄粗了。大纲仍在外面

它在1px中移动看起来只是一个Chrome bug。。您可以通过切换焦点上的边框和轮廓颜色来解决这一问题

input:focus { border: 1px solid red; outline: 1px solid orange;}

---

它仍然以1px的速度移动，但颜色顺序至少保持不变。

Chrome的轮廓边框略厚于输入边框，使其看起来像是在内部。如果这很烦人，您可以通过以下方式改变chrome的轮廓：

outline:none;

---

演示

Chrome更改焦点上的轮廓偏移量（控制轮廓位置）

input:focus { border: 1px solid red; outline: 1px solid orange;}

---

只需使用

outline:1px纯蓝色；轮廓偏移：0它会按照您希望的方式工作。
它会工作，但只有当线条像您所说的那样粗时才会工作。当你聚焦输入时，轮廓收缩了大约1个像素——这足以把一切搞糟，当我使用细线时。我认为最好的解决方案是使用框阴影属性。它并不适用于所有的浏览器，但我认为它至少会变得更漂亮。是的，尽管有很多方法。不漂亮（代码方面），但可能会有帮助。他已经有了自定义的大纲。问题是，当输入框处于焦点时，轮廓在1px内移动，使其看起来像“内联”而不是轮廓，因为它似乎在边框内。我希望边框始终在那里。为什么在正常模式和聚焦模式下会有所不同？我已经通过“1px solid”定义了轮廓的宽度。