html - Firefox label element border cut off with position relative -

I have some custom check boxes with which I am working. When you select them the focus class joins them. When this happens, the boundary appears around it. For most browsers, the boundary element looks like a square around the element, though the left border in Firefox is cut if you correct this situation, fix the problem. Although I do not want to do this for position purposes I have made an open example here:

Notice when you see in Firefox what this looks like on Chrome. How can I behave like chrome?

Here is the html code:

  & lt; Div class = "textContainter" & gt; & Lt; Label class = "input-control checkbox focus" & gt; "Input id =" class "all" class = "class all input-control" type = "checkbox" name = "status" value = "item 1" tabindex = "-1" check "=" checked "/> ;    test item 1  

Here is the CSS

  label.input-control {display: Inline-block;}. TextContainter Focus {Outline: 1px Dotted! Important;} Input-Control, Input-Control. Input-Control -Body {status: 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/ upload / 2010/04 / fancy-radio-checkbox page ");} Label.input-control.input-control-img {background-position: 0; background-repeat: any duplication No; width: 20px;} label.input - control period {cursor: indicator; swim left; height: 20px;}  

So far this place of input elements on the left End

  label.input- control input {left: -9999px; Status: Completed; }  

The label spreads along the frame as well (at least in Firefox).

Control {display: inline-block; Hidden flurry; }