css浏览器兼容问题集锦_html/css_WEB-ITnose

WBOY
Freigeben: 2016-06-24 11:51:13
Original
953 Leute haben es durchsucht

1、问题: 表单按钮用input type=submit和a链接两者表现不一致的问题。

input{ border:none; }

.btn{ ...; display:inline-block; }

.btn{ line-height: 35px; padding: 0px 30px; }   ①

解决方案:

.btn{ height: 35px; line-height: 35px; width: 90px; vertical-align: middle; text-align: center; }  ②

width和height限制按钮的宽和高,line-height和vertical-align:middle是让文字垂直居中,text-align:center让文字水平居中。

图片描述:

 1 2 分别对应①②代码

2、问题:表单的输入框、文本、验证码图片没有对齐

 form p{ margin-bottom: 10px;}
.label{ width: 100px; text-align: right; padding-right: 5px; display: inline-block; }
.ipt{ height: 40px; width: 210px; border: 1px solid #dcdcdc; }   (注意这里input的高度使用height。在ie中line-heigh不能撑开input的高度,firefox和chrome可以)
.imgCode{ height: 40px; width: 70px; display: inline-block; cursor: pointer; }


   


   


   

css浏览器兼容问题集锦_html/css_WEB-ITnose


 
   ①

解决方案:

添加.label,.ipt,.imgCode的属性 { vertical-align: middle; }  ②

图片描述:

 

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage