不仅不同浏览器不同,不同的字体,不同的文字大小也会表现不一样。
重置 form checkbox & radio
因为不同浏览器解析不一样,有些是默认margin,有些是默认padding,还有ie6,7连margin和padding即使设置为0后,所占的空间还是比较大,所以还是有必须重置下,这样就能解决很多不必要的麻烦。
以下是 14px Arial 字体的解决方案:
1、css代码
.form {font:14px/18pxArial,Helvetica,sans-serif; } .form input, .form label {vertical-align:middle; } .form label {margin-right:6px; } .form_checkbox, .form_radio { margin:03px00;/*与右侧文字的间距*/ padding:0; width:13px; height:13px; /*ie7 ie6 根据不同的 font-size 设置不同的值*/ *vertical-align:1px; } |
2、html代码
<formname="form1"method="post"action=""class="form"> <p> <inputtype="checkbox"name="checkbox4"id="checkbox4"class="form_checkbox"> <labelfor="checkbox4">checkbox4</label> <inputtype="checkbox"name="checkbox5"id="checkbox5"class="form_checkbox"> <labelfor="checkbox5">checkbox5</label> <inputtype="checkbox"name="checkbox6"id="checkbox6"class="form_checkbox"> <labelfor="checkbox6">checkbox6</label> </p> <p> <inputtype="radio"name="radio"id="radio4"value="radio4"class="form_radio"> <labelfor="radio4">radio4</label> <inputtype="radio"name="radio"id="radio5"value="radio5"class="form_radio"> <labelfor="radio5">radio5</label> <inputtype="radio"name="radio"id="radio6"value="radio6"class="form_radio"> <labelfor="radio6">radio6</label> </p> </form> |
3、效果图