电脑技术网——专业手机电脑知识平台,关注科技、手机、电脑、智能硬件
HTMLCSSHTML5Bootstrap

交友input文字向下Pardosa和按钮对齐问题的实例教程

2020-11-30 17:41:53 出处:[ 菜菜电脑网 ] 人气:次阅读
1、盒子模型问题:恳请CSS重置

2、按钮不对齐:商量浮动或者vertical-align:middle;然后近似值宽高,使其对齐 ;

3、IE8文本不方是:line-height属性 留意:IE8不背书font拼法(或者某个样式不反对)

IE浏览器测试到IE8,IE5、6、7则有。

问题原因:盒子模型

1、盒子模型:

在页面换2个input,一个text文本框,一个button按钮(设置宽高,无任何其他样式)

input[type='text']{width:400px;height:45px;}

input[type='button']{width:45px;height:45px;}

通过观察:IE8:文本框border:1px;padding:2px;

按钮border:3px;padding:1px 8px;

火狐:文本框border:1px;padding:2px;

按钮border:3px;padding:0px 8px;

谷歌:文本框border:2px;padding:1px 0px;

按钮border:2px;padding:1px 6px;

附加样式,让border,padding一样

input[type='text']{width:400px;height:45px;border:1px solid red;padding:0;}

input[type='button']{width:45px;height:45px;border:1px solid red;padding:0;}

掩蔽:

IE8:文本框border:1px;content:202x47 (IE的盒子模型)

按钮border:1px;content:45x45 (IE的盒子模型)

火狐:文本框border:1px;content:200x45

按钮border:1px;content:43x43

谷歌:文本框border:1px;content:200x45

按钮border:1px;content:43x43

2、按钮对齐方法:浮动(原因是Offset完全相同不能跟踪更多的专业知识,可以自己足量这方面的科学);

input[type='text']{width:400px;height:45px;border:1px solid red;padding:0;float:left;}
input[type='button']{width:45px;height:45px;border:1px solid red;padding:0;float:left;}

参见第2步,自行推算宽高,使其对齐(有的似乎无法border,用的背景色取而代之,问设置border:0;高度自行调整)
input[type='text']{width:400px;height:45px;border:1px solid red;padding:0;float:left;}
input[type='button']{width:47px;height:47px;border:1px solid red;padding:0;float:left;}

3、IE8文本Pardosa:line-height 留意 IE8不全力支持font用字

将font:normal 18px "开发人员雅黑";替换font-size:18px;font-style:normal;font-family:"苹果公司雅黑"!

或者(这样可以用font:normal 18px "赛门铁克雅黑";用字,但是有点不是在正中间)
input[type='text']{width:400px;height:25px;padding:10px 0px;border:1px solid red;float:left;}
input[type='button']{width:47px;height:47px;line-height: 47px;border:1px solid red;padding:0;float:left;}

以上就是倾听input文字横向和按钮对齐问题的实例教程的详尽内容,更多再三关切php中文网其它关的文章!

关于我们 - 广告合作 - 联系我们 - 免责声明 - 网站地图 - 投诉建议 - 在线投稿

©CopyRight 2008-2020 caicaipc.com Inc All Rights Reserved.
菜菜电脑网 版权所有 联系QQ:173533152