如何一致地跨浏览器对齐复选框及其标签

我不喜欢相对定位,因为它使元素在其级别上呈现在其他所有内容之上(如果你有复杂的布局,它可以在某些东西之上).

我发现vertical-align: sub在Chrome,Firefox和Opera中,复选框看起来很好.无法检查Safari因为我没有MacOS而且IE10稍微关闭,但我发现它对我来说是足够好的解决方案.

另一种解决方案可能是尝试为每个浏览器制作特定的CSS,并使用%/ pixels/EMs中的一些vertical-align对其进行微调:http: //css-tricks.com/snippets/css/browser-specific-hacks/

选择400+ upvotes的答案对我来说在Chrome 28 OSX中不起作用,可能是因为它没有在OSX中测试过,或者在2008年回答这个问题的时候确实有效.

时代已经改变,现在新的CSS3解决方案是可行的.我的解决方案使用伪元素来创建自定义复选框.所以规定(无论你看看它的优缺点)如下:

仅适用于现代浏览器(FF3.6 +,IE9 +,Chrome,Safari)

依赖于自定义设计的复选框,在每个浏览器/操作系统中都会呈现完全相同的复选框.在这里,我刚刚选择了一些简单的颜色,但你总是可以添加线性渐变等,以便让它更具爆炸性.

是否适合某种字体/字体大小,如果更改,您只需更改复选框的位置和大小,使其显示为垂直对齐.如果调整正确,最终结果仍应接近所有浏览器/操作系统中的完全相同.

没有垂直对齐属性,没有浮动

必须在我的示例中使用提供的标记,如果结构类似于问题,它将无法工作,但是,布局基本上看起来相同.如果你想移动东西,你还必须移动相关的CSS

你的HTML:

div.checkbox {
    position: relative;
    font-family: Arial;
    font-size: 13px;
}
label {
    position: relative;
    padding-left: 16px;
}
label::before {
    content :"";
    display: inline-block;
    width: 10px;
    height: 10px;
    background-color: white;
    border: solid 1px #9C9C9C;
    position: absolute;
    top: 1px;
    left: 0px;
}
label::after {
    content:"";
    width: 8px;
    height: 8px;
    background-color: #666666;
    position: absolute;
    left: 2px;
    top: 3px;
    display: none;
}
input[type=checkbox] {
    visibility: hidden;
    position: absolute;
}
input[type=checkbox]:checked + label::after {
    display: block;
}
input[type=checkbox]:active + label::before {
    background-color: #DDDDDD;
}

    

        
        Label for checkbox
    

  

     Label text
  

.CheckboxList
{
    font-size: 14px;
    color: #333333;
}
.CheckboxList input
{
    float: left;
    clear: both;
}

.checkbox-custom {
  opacity: 0;
  position: absolute;
}
.checkbox-custom,
.checkbox-custom-label {
  display: inline-block;
  vertical-align: middle;
  margin: 5px;
  cursor: pointer;
}
.checkbox-custom + .checkbox-custom-label:before {
  content: '';
  display: inline-block;
  background: #fff;
  border-radius: 5px;
  border: 2px solid #ddd;
  vertical-align: middle;
  width: 10px;
  height: 10px;
  padding: 2px;
  margin-right: 10px;
  text-align: center;
}
.checkbox-custom:checked + .checkbox-custom-label:before {
  width: 1px;
  height: 5px;
  border: solid blue;
  border-width: 0 3px 3px 0;
  transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  border-radius: 0px;
  margin: 0px 15px 5px 5px;
}

  
  First Choice


  
  Second Choice