CSS 文字域和按钮对齐不1致处理计划方案

日期:2021-01-20 类型:科技新闻 

关键词:抠图换背景,免费的抠图软件,美图抠图,手机抠图软件哪个好,p图软件哪个好用

文本要包括在label标识中,并设定行高,不然文本会与文字框的顶 端对齐。文字框要设定vertical-align:middle;不然文字框与button顶端对齐。button汉语字竖直垂直居中,要设定高和行高,行高要小于高。

对input标识设置款式,编码以下:
//HTML 编码

拷贝编码
编码以下:

<form> <input type="text" name="textfield" id="textfield" />
<input type="submit" name="button" id="button" value="递交" />
</form>

//CSS 编码

拷贝编码
编码以下:

#textfield{border:1px solid #000;height:16px;}
#button{background:#FFF;color:#000;border:1px solid #000;height:20px;}

文字域设定高宽比 16px,按钮高宽比必须设定 20px。依照 IE 的规范一切正常对齐,但在 Firefox 汉语本域和按钮高宽比是错开的。

此时根据对 input 标识设置左波动 (float:left),便可适配 Firefox,CSS 编码以下:

拷贝编码
编码以下:

#textfield{border:1px solid #000;height:16px;float:left;}
#button{background:#FFF;color:#000;border:1px solid #000;height:20px;float:left;}

自然,可使用CSS Hack以更有对于性地操纵访问器主要表现。