macos - 单选按钮/复选框在 mac 机器上的 safari 8 和 9 中单击时移动

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/