首页  >  文章  >  web前端  >  css浏览器兼容问题集锦_html/css_WEB-ITnose

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

WBOY
WBOY原创
2016-06-24 11:51:13944浏览

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; }  ②

图片描述:

 

声明:
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn