css - Firefox 中的文本输入边距

Question

我在 firefox 中的文本输入有问题，它有一些边距，我不能去掉它们，也许那个空间不是边距？(它在输入的边界之外，所以它看起来像一个 margin )。

在上图中，输入的宽度设置为 100%，边距和填充为 0，我也尝试设置 -moz-box-sizing: border-box;

我想要一些资源或解释来让我理解那个空间是什么以及我怎样才能摆脱它？谢谢。

编辑1:这是我当前的测试页面 https://www.designersbookshop.com/support/test.html我还在...test_2.html 中复制了一份(我会尝试 test.html 上的建议)，检查左侧的输入。

编辑2:我的 Firefox 版本是 10.0.2这是一个输入元素在 Firebug 中的样子，很明显在边框外画了一个边距或类似的东西(或者我很笨但我想学习) 在输入框上方的图像中，输入框左右可见一条小线(1px)。

Edit3 我弄明白了，是边框，我在 Ubuntu 上，但我在 Mac 上有类似的东西，所以是主题引擎添加了那个白色边框？

Answer 1

您使用的是 OSX 吗？我认为你指的是焦点突出显示。它只在事件元素上看到，对吧？

通常由

控制

input:focus {
  outline: none;
}

有些人也用它来删除链接周围的矩形。这是一种不好的做法，因为它会降低可用性，因为用户无法直观地看到什么是事件链接。 (想想键盘用户。)

仅供引用:这是您在 Windows 下的 Firefox 10 中测试页面(来自 Edit1)的屏幕截图:http://img210.imageshack.us/img210/1764/inputform.png

与 HTML 中的输入字段一样 - 它们的外观通常由操作系统或浏览器决定。很难获得一致的外观。