当前位置: 首页 > 图文教程 > 网页制作 > CSS样式表 > input 按钮显示差异的解决方法

CSS样式表
Webjx收集基于CSS+JS设计50款优秀的导航菜单
初学者简单学习CSS网页布局
CSS教程:一张图片实现圆角
基于CSS的网站导航菜单
CSS新特性:圆角边框多栏Gird布局背景设置
CSS实例教程:制作网页特殊产品列表
收集国外网站的25个CSS高级教程
CSS教程:制作圆角矩形的网站头像
网页推荐值得一看的CSS框架
有趣图例:你是一个网页设计师吗?
安装Firefox的Jetpack扩展的步骤
CSS教程:CSS制作3D立方体
Css教程:FireFox正常IE错位的绝对定位元素
CSS对IE6、IE7、IE8支持详细的易用的参考
CSS Sprites简介以及优缺点
CSS教程:避免使用滤镜
DIV+CSS佈局代码精简对SEO的影响
学习CSS需要知道的CSS基础知识
CSS教程:clip属性全知道
基于firebug的firefox扩展:css usage

CSS样式表 中的 input 按钮显示差异的解决方法


出处:互联网   整理: 软晨网(RuanChen.com)   发布: 2009-09-11   浏览: 174 ::
收藏到网摘: n/a

请在各浏览器里查看以下input的显示效果!

解决后显示效果!
具体代码
.button{
margin:0;
padding:0 0.25em;
width:auto;
*width:1;/*宽度不带单位我是第一次见,不知道其作用!- -!*/
overflow:visible;
}
还有一个问题就是input的文字垂直居中问题,这里引用一下! fedcn
默认情况下,在IE6/7下,按钮中的文本居中的不是很精确,需要调整,而在IE8 Beta2下,按钮中的文字位置貌似是固定不变的。
经过反复测试,发现对按钮设置适当的行高值就可以解决, 其中在IE6/8下, line-height = height - 8 ,对IE7 单独设置 line-height = hegiht - 4