单选按钮/复选框移动被点击在safari 8和9在mac机

Question

我有一个带有复选框和单选按钮的表单，我需要给它设置高度，并将其垂直对齐到中间，以便与标签对齐(它可以有不同的行高)

    input[type="checkbox"],input[type="radio"] {
    margin:0px;
    vertical-align: -webkit-baseline-middle;
    float: none;
    height: 38px;
  }
label {
 line-height: 38px;
}

可以在http://jsfiddle.net/9my3ksf3/1/

Answer 1

复选框和单选按钮没有像预期的那样工作，因为不是所有的浏览器都以相同的方式侦听这些输入的高度和宽度设置。

高度和宽度仍然存在，但按钮不是以该大小呈现的，所以当你点击它时，它在容器内移动，容器具有你设置的高度。我不知道为什么会这样，但身高是问题的原因。试着移除它，当你点击它时，按钮应该停止移动。我知道这不是理想的，所以也许一个更好的问题是"如何设置Safari中单选/复选框输入的宽度和高度?"

这里有一篇很棒的文章，比较了不同浏览器中设置单选按钮的宽度和高度的效果:http://www.456bereastreet.com/lab/styling-form-controls-revisited/radio-button/