标签在绝对定位时仍占用空间

Question

我有一个javascript验证插件，用于替换太多的地方。它在验证输入后插入标签。当前未经验证的标记＆amp;图片如下：

本来喜欢展示图片，但我想我还不能。

<div id="gender-select">
    <label id="gender">Gender</label>
        <input class="male required radioBtn gender-hide" type="radio" name="gender" value="1" id="male">
        <label for="male"></label>
        <input class="female required radioBtn gender-hide" type="radio" name="gender" value="2" id="female">
        <label for="female"></label>
</div>

这是验证运行后的代码，性别输入无效。

<div id="gender-select">
    <label id="gender">Gender</label>
       <input class="male required radioBtn gender-hide error" type="radio" name="gender" value="1" id="male">
       <label for="gender" generated="true" class="error">Mandatory</label>
       <label for="male"></label>
       <input class="female required radioBtn gender-hide error" type="radio" name="gender" value="2" id="female">
       <label for="female"></label>
</div>

当前CSS

#join-page #form-content input[type="radio"] {
position: absolute;
left: -8000px;
}

#join-page #form-content input {
background: #f4f4f4;
height: 40px;
border: none;
padding: 0 2%;
width: 100%;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
-moz-background-clip: padding;
-webkit-background-clip: padding-box;
background-clip: padding-box;
font-size: 16px;
color: #a2a2a2;
}

#join-page #form-content input[type="radio"] + label {
background: url('/App_Presentation/responsive/OpinionMilesClub/img/omc-genderRadio.png') 0px 0px no-repeat;
cursor: pointer;
height: 40px;
width: 30px;
}

#join-page #form-content label.error[for="gender"] {
position: absolute;
top: -11px;
left: 0px;
}

#join-page #form-content input[type="radio"] + label[for="female"] {
margin-left: -4px;
background: url('/App_Presentation/responsive/OpinionMilesClub/img/omc-genderRadio.png') 31px 0px;
}

我不明白为什么标签还占用空间？任何人都有任何想法...