输入类型=在 Firefox 中提交文本垂直对齐 [英] input type=submit text vertical alignment in Firefox
问题描述
我正在尝试设置表单按钮的样式,但在 Firefox 中遇到了一个问题,我无法深入...
我想让某些 <a/>
和 <input type="submit"/>
看起来相同(我有一个按钮背景图像,使用滑动门技术应用悬停效果.)
这一切都很好,除了在 Firefox 中,输入提交文本比它应该的略低.IE 和 Safari/Chrome 运行良好.
(来源:muonlab.com)
有人有什么想法吗?
谢谢
.按钮{光标:指针;边框:0;背景色:#fff;颜色:#fff;字体大小:1.4em;字体粗细:粗体;大纲:0;字体系列:Arial、Verdana、Sans-Serif;}一个按钮{显示:块;向左飘浮;文本对齐:居中;文字装饰:无;填充:5px 0 0 0;高度:22px;右边距:1em;}.btn-小-灰色{高度:27px;宽度:96px;背景位置:0 -81px;背景图片:url(/assets/images/buttons/buttons-small.gif);}.btn-大-绿色{高度:27px;宽度:175px;背景位置:0px -54px;背景图片:网址(/assets/images/buttons/buttons-large.gif);}
我找到这个帖子是因为几个月前我已经解决了这个问题,今天再次遇到它时,我不记得我做了什么.好的.在仔细研究了我的 css 之后,我终于找到了修复".我不能相信,因为我是在网上某个地方找到的,但希望它对你和我一样有用:
input::-moz-focus-inner/*去除FF中的按钮填充*/{边框:0;填充:0;}
我希望这会有所帮助.
I'm trying to style my form buttons and I'm experiencing a problem in Firefox that I can't get to the bottom of...
I want to style certain <a />
s and <input type="submit" />
s to look the same (I have a button background image, using a sliding-doors technique to apply a hover effect.)
This all works great, except in Firefox, the input submit text is slightly lower down than it should be. IE and Safari/Chrome work fine.
(source: muonlab.com)
Anyone got any ideas?
Thanks
<div class="buttons">
<a href="#" class="button btn-small-grey">« Back</a>
<input type="submit" class="button btn-large-green" value="Save changes" />
</div>
.button
{
cursor: pointer;
border: 0;
background-color: #fff;
color: #fff;
font-size: 1.4em;
font-weight: bold;
outline: 0;
font-family: Arial, Verdana, Sans-Serif;
}
a.button
{
display: block;
float: left;
text-align: center;
text-decoration: none;
padding: 5px 0 0 0;
height: 22px;
margin-right: 1em;
}
.btn-small-grey
{
height: 27px;
width: 96px;
background-position: 0 -81px;
background-image: url(/assets/images/buttons/buttons-small.gif);
}
.btn-large-green
{
height: 27px;
width: 175px;
background-position: 0px -54px;
background-image: url(/assets/images/buttons/buttons-large.gif);
}
I found this post because I had resolved this problem a few months ago and when I ran into it again today, I couldn't remember what I'd done. Nice. After poring over my css I finally located the "fix". I can't take credit because I found it on the web somewhere, but hopefully it will be as useful to you as it has been for me:
input::-moz-focus-inner /*Remove button padding in FF*/
{
border: 0;
padding: 0;
}
I hope this helps.
这篇关于输入类型=在 Firefox 中提交文本垂直对齐的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!