Hi I seem to be having some problems with Firefox adding 2 extra pixels of padding in a submit button.I have tested this in chrome and IE9 and both browsers render the code ok,Firefox seems to be adding 2 pixel padding at the bottom to the submit button with the key background on the top-right corner.Here is the website:
嗨，我似乎有点问题，Firefox在提交按钮中添加了2个额外的像素。我已经在chrome和IE9上测试过了，两种浏览器都显示了代码，Firefox似乎在底部添加了2个像素填充，并在右上角的关键背景下添加了。这是网站:
www.thanathos.host22.com
This is the code for the site:
这是网站的代码:
<form method="post" action="index.html">
<input type="text" value="Username"/>
<input type="text" value="Password"/>
<input type="submit" id="submit" value=""/>
<img src="img/header/key.png" alt="" id="key"/>
</form>
header section form input{
color:#b3aaaa;
border:1px solid #cccccc;
float: left;
padding:5px 8px;
margin-left: 6px;
}
How can I correct this?
我该如何改正呢?
If there is no solution for this can anyone please provide me a solution in witch the input text is equal with input submit and the input text is center from top-bottom?
如果没有解决方案，请大家给我一个解决方案，输入文本与输入文本是相等的，输入文本是从上到下的中心?
EDIT: I have checked this in another computer and it seems that Firefox renders this correctly I have encountered this type of problem before that the same browser version shows a website a bit different on different computers.Last time something similar happened in chrome.I never could solve this problem.
编辑:我已经在另一台电脑上检查过了，而且看起来火狐浏览器显示的是正确的，我之前遇到过这类问题，之前的浏览器版本在不同的电脑上显示了一个不同的网站。上一次类似的事情发生在chrome上。我永远也解决不了这个问题。
Anyone know why the same browser would render a page differently on different computers with the same screen size and resolution?
有人知道为什么相同的浏览器会在不同的屏幕上显示相同的屏幕大小和分辨率吗?
2 个解决方案
#1
22
I was having a problem like this. I then found this CSS thingy that solved the problem:
我遇到了这样的问题。然后我发现这个CSS的东西解决了这个问题:
input::-moz-focus-inner { border:0; padding:0 }
This solution was given in a comment in this blog post:
这个解决方案是在这篇博文的评论中给出的:
Bulletproof CSS input button heights
防弹CSS输入按钮高度。
As the post says: this happens because Firefox (User Agent) own CSS style uses !important and anything one tries to do to override the CSS property won't get applied.
正如文章所述:这是因为Firefox(用户代理)自己使用了CSS样式!重要的是，任何试图覆盖CSS属性的东西都不会被应用。
#2
0
** I leave this here since I think it's useful anywhoo..**
我把这个留在这里，因为我认为它有用。
in either case try accessing just the button and play around with the css for it:
在这两种情况下，试着只访问该按钮，并使用css来处理它:
input[type="submit"] {
padding-bottom: 3px;
}
EDIT
编辑
Okay so there is a problem with your solution, since you're positioning the image above the button you'll make it harder to actually click the submit-button. If you hover the mouse over the key you'll see that it doesnt change to a pointer = not clickable.
好的，你的解决方案有一个问题，因为你把图像定位在按钮上，你会让你更难点击submitbutton。如果您将鼠标悬停在键上，您将看到它不会更改为指针=不可点击。
I suggest that you remove the image-tag and instead use it as a background in your submit-button. Something like this:
我建议您删除图像标记，并将其作为您的submitbutton按钮的背景。是这样的:
input[type="submit"] {
padding-bottom: 3px;
background: url(path-to-image);
border: none;
height: "img-height";
width: "img-width";
}
If the size of the image is correct, also since you do seem to have some sort of background in the submit button allready. Id go with making an image that is the correct size which contains both the background and the key image (I hope this last sentence makes some sence).
如果图像的大小是正确的，也因为您似乎在提交按钮中有某种背景。我要做一个正确的尺寸，它包含了背景和关键的图像(我希望这最后一个句子可以使一些sence)。
Another possible problem could be that you have no text in your button, however the button should inherit the lineheight/font-size from earlier in the css and thus might expand the submit-button more. Try adding something like font-size: 1px or something.
另一个可能的问题是，您的按钮中没有文本，但是按钮应该从css的早期继承lineheight/font-size，因此可能会更多地扩展submitbutton按钮。尝试添加像字体大小:1px之类的东西。
#1
22
I was having a problem like this. I then found this CSS thingy that solved the problem:
我遇到了这样的问题。然后我发现这个CSS的东西解决了这个问题:
input::-moz-focus-inner { border:0; padding:0 }
This solution was given in a comment in this blog post:
这个解决方案是在这篇博文的评论中给出的:
Bulletproof CSS input button heights
防弹CSS输入按钮高度。
As the post says: this happens because Firefox (User Agent) own CSS style uses !important and anything one tries to do to override the CSS property won't get applied.
正如文章所述:这是因为Firefox(用户代理)自己使用了CSS样式!重要的是，任何试图覆盖CSS属性的东西都不会被应用。
#2
0
** I leave this here since I think it's useful anywhoo..**
我把这个留在这里，因为我认为它有用。
in either case try accessing just the button and play around with the css for it:
在这两种情况下，试着只访问该按钮，并使用css来处理它:
input[type="submit"] {
padding-bottom: 3px;
}
EDIT
编辑
Okay so there is a problem with your solution, since you're positioning the image above the button you'll make it harder to actually click the submit-button. If you hover the mouse over the key you'll see that it doesnt change to a pointer = not clickable.
好的，你的解决方案有一个问题，因为你把图像定位在按钮上，你会让你更难点击submitbutton。如果您将鼠标悬停在键上，您将看到它不会更改为指针=不可点击。
I suggest that you remove the image-tag and instead use it as a background in your submit-button. Something like this:
我建议您删除图像标记，并将其作为您的submitbutton按钮的背景。是这样的:
input[type="submit"] {
padding-bottom: 3px;
background: url(path-to-image);
border: none;
height: "img-height";
width: "img-width";
}
If the size of the image is correct, also since you do seem to have some sort of background in the submit button allready. Id go with making an image that is the correct size which contains both the background and the key image (I hope this last sentence makes some sence).
如果图像的大小是正确的，也因为您似乎在提交按钮中有某种背景。我要做一个正确的尺寸，它包含了背景和关键的图像(我希望这最后一个句子可以使一些sence)。
Another possible problem could be that you have no text in your button, however the button should inherit the lineheight/font-size from earlier in the css and thus might expand the submit-button more. Try adding something like font-size: 1px or something.
另一个可能的问题是，您的按钮中没有文本，但是按钮应该从css的早期继承lineheight/font-size，因此可能会更多地扩展submitbutton按钮。尝试添加像字体大小:1px之类的东西。