(一)

首先,说明一下表单标签(input、select)可能在各种浏览器中的表现差异:

1.当input或select与其他标签(例如a、label)混排时,可能出现不居中的问题。

2....混排时,外层标签不能控制表单标签。

3.input里面输入的文字行高存在差别,有空隙等等。

解析现象:

input:text特性时,

默认情况下:

1.firefox高度height为16px;IE下高度为14px;

2.字体大小为:13.3333px;

3.input存在padding值:Firefox为:padding:1px 0;IE下为:padding:1px 0 3px 0;

 

(二)
<title>测试vertical-align</title>
<style>
*{margin:0;}
label{vertical-align:middle}
.inputcheckbox{vertical-align:middle;}
body{font-family:tahoma;font-size:12px;}
</style>
</head>
<body>
<input class="inputcheckbox" name="test" value="1" type="checkbox">
<label>测试文字x</label>
<br/><br/>
<input class="inputcheckbox " name="test2" value="2" type="radio">
<label>测试文字x</label>
<br/><br/>
<input class="inputcheckbox " name="Text1" type="text" />
<label>文字</label>
<input  class="inputcheckbox " name="Text1" type="text" />
<label>文字</label>
<br/><br/>
<label>测试文字</label>
<input   class="inputcheckbox " name="Button1" type="button" value="按钮" />
<br/><br/>
<select class="inputcheckbox " name="Select1">
<option>测试文字</option>
</select>
<label>测试文字</label>
</html>

 

(三)

 ul是一个很常用的标签,但是因为它在Firefox和IE下的不同表现,让人觉得它是个很难以控制的标签。
ul在Firefox下有个 padding值, 却没有margin值;而在IE下正好相反,ul有个margin值, 却没有padding值.
在Firefox 下,ul的list-style默认是处于内容的外边缘的。当然可以通过css可以将list-style置为内容的内边缘。
通过权衡得到适合两个浏览器的设置:padding:0; margin:0; list-style:inside;。还可以将ul设置为padding:0; margin:0; list-style:none;,然后给li添加背景图片,也是很不错的选择。

Css代码

<style type="text/css">   

body{font-size:12px; margin:20px; line-height:18px;}   

#box{width:200px; background-color:#CC9; border:#990 1px solid;}   

#box ul{padding:0; margin:0; list-style:inside decimal; }   

</style>   

<div id="box">   

<ul>   

<li>这是第一句话。</li>   

<li> 这是第二句话。</li>   

<li>这是第三句话。</li>   

<li>这是第四句话。</li>   

<li>这是第五句话。</li>   

</ul>   

</div>  

(四)

解决IE下input=text和input=password的长度不一致
      IE下input类型为text和password的长度不一致的原因是源于字体,password默认是英文字体,而text默认为定义的字体或者中文字体(我想这是在中文系统浏览器环境下的原因),从而出现了长度不同的现象。解决的方案有二:
1.为input设置font-family英文字体

input {font-family:'Verdana';}

2.将text和password的width属性设置为相同的宽度值
<input   name="textinput"   type="text"   size="30"   maxlength="12"     style="width:200px">
<input   name="passwordinput"   type="password"   size="30"   maxlength="12"   style="width:200px">

posted on 2010-08-24 21:34  houbusheng123  阅读(1355)  评论(0编辑  收藏  举报