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

Question

如何在所有浏览器中获得相同样式的输入类型=“无线电”。我试图在页面上从左到右获得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在Radio/checkbox alignment in HTML/CSS上指出的那样，试试这个：

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

另外，请注意，最好使用<label>标记包装单选按钮标签。

请参阅DEMO。