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

CSS样式表
网页布局教程:掌握CSS网页布局属性
WEB标准的CSS网页布局技巧5则
你怎么书写CSS代码?
CSS教程:表单元素不继承body的字体属性
调整CSS的方式给滚动条换色
CSS网页布局中表格制作实例
网页设计学习教程:CSS盒模型
网页制作学习教程:CSS Position
网页九宫格布局:应用透明的外圆角
CSS网页布局学习的参考诀窍
把网页按钮伪装成超链接
CSS教程:检验CSS书写是否标准合理
你的网页最好通过HTML校验和CSS校验
网页制作教程:CSS的好处
网页制作心得:分离之后怎么做?
CSS教程:数字和字母将容器撑大问题解决
CSS Sprites优化网页代码的方法
CSS实例:精简代码的兼容各浏览器的滑动门
CSS网页制作技巧:提高CSS可阅读性
英文教程:CSS的Float

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


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