css - html单选按钮在所有浏览器中的样式相同

Question

如何在所有浏览器中获得相同样式的输入 type="radio"。我试图在页面上从左到右获取 3 个单选按钮，单选按钮和文本使用 css 在所有 IE9、Chrome 和 FF 中居中。我正在使用所有不同的类型或垂直对齐和填充，它们适用于某些浏览器但不是全部。

<input class="text-bottom" type="radio" value="1"  name="ProcessingComplete">Works in FF & Chrome
<input class="middle" type="radio" value="1"  name="ProcessingComplete">Works in IE
<input class="top" type="radio" value="1"  name="ProcessingComplete">Works in FF & Chrome

.middle
{
vertical-align: middle;
}
.top
{
vertical-align: top;
}
.text-bottom
{
vertical-align:text-bottom;
}

Answer 1

正如 Dario在 HTML/CSS 中的 Radio/checkbox alignment 中指出的那样，试试这个：

input[type="radio"] {
  margin-top: -1px;
  vertical-align: middle;
}

另外，请记住，使用<label>标签包装单选按钮标签是最佳做法。

见演示。