The alignment of font 12px is for radio and checkbox only
Css:
<pre name= "code" class= "html" >.form {font-size:12px; line-height:1.4}.form. txt {width:180px; height:25px; paddi ng:3px; border:1px solid #dbdbdb; line-height:25px; Color: #999; Vertical-align:middle}.form. Txt:hover,.form. Txt:focus {border-color: #51b5f7; color: #333}.form. btn {width:78px; height:33px; *margin-top:1px; Border:none; Background-color: #31a5f7; border-radius:3px; font-size:15px; Color: #fff; Vertical-align:middle; Transition:all. 3s linear 0s}.form. btn:hover {background-color: #51b5f7}.form. Radio {margin-top: -3px; *margin-top:0; v Ertical-align:middle}.form. chkbox {margin-top:1px; Margin-top: -2px\9; *margin-top:0px; Vertical-align:middle;}
Html:
<form action= "#" class= "form" > <div> <input type= "Radio" value= "0" name= "Media" class= "Radio" > Network <input type= "Radio" value= "1" name= "Media" class= "Radio" > TV <input type= "Radio" value= "2" name= "Media" class= "Radio" > Newspaper </div> <div> <input type= "checkbox" value= "0" name= "Media" class= " Chkbox "> Network <input type=" checkbox "value=" 1 "name=" Media "class=" Chkbox "> TV <input type=" checkbox "value=" 2 "Name=" Media "class=" Chkbox "> Newspaper </div> <div> <input type=" text "name=" input "class=" TXT "> <input type=" Submit "Name=" btnsubmit "value=" commit "class=" btn "> </div></form>
After testing, the basic alignment in the ie,firefox,chrome is perfect, safari in the checkbox down a pixel, but also can be seen
Note that the text line height is set to 1.4 (without units) is ideal (when the text height and radio,checkbox height closest), the upper and lower spacing through the outer element control it
Here is a preview of each browser:
IE9/10 and IE11 have a little difference, but the naked eye can not be seen, it is not alone; In addition, it is possible to see that three browsers other than IE have a width of 1px more than a checkbox radio
The "Css--form" font is 12px when the table consignments (Radio,checkbox) is aligned with the text