Firefox 标签元素边框与相对位置截断答案

【问题标题】：Firefox label element border cut off with position relativeFirefox 标签元素边框与相对位置截断
【发布时间】：2015-05-20 15:09:22
【问题描述】：

我正在使用一些自定义复选框。当您选择它们时，焦点课程将添加到它们中。当发生这种情况时，它周围会出现一个边框。对于大多数浏览器，边框看起来像标签元素周围的正方形。虽然在 Firefox 中，左边框被切断了。如果您删除相对位置，则可以解决问题。尽管出于定位目的我不想这样做。我在这里创建了一个简单的示例：

http://jsfiddle.net/g617z4qk/3/

当您在 Firefox 中查看时，请注意它与 chrome 的外观有何不同。如何让 firefox 表现得像 chrome？

这里是html代码：

<div class="textContainter">
  <label class="input-control checkbox focus">"
     <input id="classAll" class="classAll input-control" type="checkbox" name="status" value="Item 1" tabindex="-1" checked="checked" />
     <span class="input-control-img"></span>
     <span class="input-control-text">test Item 1</span>
   </label>
</div>

这里是 CSS

label.input-control {
    display: inline-block;
}
.textContainter .focus {
    outline: 1px dotted !important;
 }
.input-control, .input-control .input-control-body {
   position:relative;
 }

 label.input-control input {
    left: -9999px;
    position: absolute;
 }

 label.input-control.checkbox .input-control-img {
    background-image: url("http://blogs.digitss.com/wp-      content/uploads/2010/04/fancy-radio-checkbox.png");
 }
 label.input-control .input-control-img {
   background-position: 0 0;
   background-repeat: no-repeat;
   width: 20px;
 }
 label.input-control span {
  cursor: pointer;
  float: left;
  height: 20px;
 }

【问题讨论】：

标签： html css firefox

【解决方案1】：

输入元素在最左边的位置

label.input-control input {
    left: -9999px;
    position: absolute;
 }

使标签轮廓也向左扩展（至少在 Firefox 中）。

只需为label 元素添加overflow:hidden 即可解决此问题：

label.input-control {
    display: inline-block;
    overflow: hidden;
}

http://jsfiddle.net/g617z4qk/5/

【讨论】：

【解决方案2】：

这是一种解决方法。用边框替换轮廓，它在您提到的两种浏览器上都可以正常工作。

这个问题似乎与CSS "outline" different behavior behavior on Webkit & Gecko重复

解决方法的 JSfiddle 是 border: 1px dotted;http://jsfiddle.net/g617z4qk/4/

【讨论】：