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

CSS样式表
CSS中的text-shadow属性
利用CSS3特性和浏览器中的工具进行网页设计
使用CSS3将你的网站设计推向未来
网页设计师福音:CSS网格布局生成器
CSS教程:汇总让IE6崩溃的几种方法
CSS教程:快速提升设计可读性和维护性
HTML5和CSS3给网站设计带来出色效果
CSS选择器大全
TypeSelect实现网页嵌入字体
CSS样式表尽量放到网页头部
CSS3的优势以及网页设计师如何使用CSS3技术
CSS样式表中引用图片地址在各浏览器中的差异
5种给CSS样式表瘦身减肥的方法
英文教程:50个网页制作中应用的CSS技巧
用CSS3将你的设计带入下个高度
CSS教程:新的图像替换方法
创造100%功能自适应css布局的行之有效的方法
轻松搞定IE的CSS制作网页技巧3则
网页设计应该熟知的CSS 3.0技术
制作网页常用的50种CSS工具

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


出处:互联网   整理: 软晨网(RuanChen.com)   发布: 2009-09-11   浏览: 187 ::
收藏到网摘: 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