[英]Firefox adds 2px extra padding in input text and submit
According to the answers below: this is best the solution: .text { line-height: 15px;
根据下面的答案:这是最好的解决方案:.text { line-height: 15px; } input::-moz-focus-inner {border:0;
} input::-moz-focus-inner {border:0; padding:0;
填充:0; margin-top:-1px;
边距顶部:-1px; margin-bottom:-1px;} Thank you all.
margin-bottom:-1px;} 谢谢大家。
I know that there are some similar questions on Stackoverflow.我知道 Stackoverflow 上有一些类似的问题。 Because none of the answers works for me, and I have been researching this issue for almost a week but no luck, I decide to post this question.
因为没有一个答案对我有用,而且我已经研究这个问题将近一个星期但没有运气,所以我决定发布这个问题。 Please help.
请帮忙。
Lets say I have a submit button and a text box, Firefox always adds 2px extra padding inside the elements, I tried many solutions I found on the net but none of them works.假设我有一个提交按钮和一个文本框,Firefox 总是在元素内添加 2px 的额外填充,我尝试了很多在网上找到的解决方案,但没有一个有效。
Test the code here: https://jsfiddle.net/4f2duwud/7/在这里测试代码: https ://jsfiddle.net/4f2duwud/7/
HTML: HTML:
<form action="http://google.com">
<input type="submit" class="submit" value="Go to Google">
<input type="text" class="text">
</form>
CSS: CSS:
a.button {
-webkit-appearance: button;
-moz-appearance: button;
appearance: button;
text-decoration: none;
color: initial;
}
.text {
padding:3px;
border: 1px solid gray;
}
.submit {
padding:3px;
border:1px solid gray;
}
input[type="reset"]::-moz-focus-inner,
input[type="button"]::-moz-focus-inner,
input[type="submit"]::-moz-focus-inner,
input[type="text"]::-moz-focus-inner,
input[type="file"] > input[type="button"]::-moz-focus-inner {
border:0 !important;
padding:0 !important;
}
Screenshot - Firefox:屏幕截图 - 火狐:
Screenshot - Chrome:
屏幕截图 - Chrome:
Try explicilty setting up the line-height
to 15px
or 17px
or whichever works for you尝试将
line-height
明确设置为15px
或17px
或适合您的任何一个
https://jsfiddle.net/Lv1cb2xr/ https://jsfiddle.net/Lv1cb2xr/
input::-moz-focus-inner {
border: 0;
padding: 0;
margin-top:-2px;
line-height: 17px ;
}
What worked for me for the text input (Firefox version 86) was setting the background-color:文本输入(Firefox 版本 86)对我有用的是设置背景颜色:
.text {
padding: 0px;
background-color: White
}
Once that's in place then you can set the padding and firefox will respect it.一旦到位,您就可以设置填充,Firefox 会尊重它。
I don't know why background-color: White
works while border: 1px solid gray
(as you had in your post) doesn't.我不知道为什么
background-color: White
有效而border: 1px solid gray
(正如你在你的帖子中所做的那样)没有。
I can reproduce my results in the linked jsfiddle ( https://jsfiddle.net/Lv1cb2xr/ ).我可以在链接的 jsfiddle ( https://jsfiddle.net/Lv1cb2xr/ ) 中重现我的结果。 Setting
border: 1px solid gray
in the fiddle does persuade firefox to respect the padding - apparently different to the OP's experience.设置
border: 1px solid gray
确实说服 firefox 尊重填充 - 显然与 OP 的体验不同。
It seems like a firefox bug to me, though no doubt if I were to report it then mozilla would tell me it's in the original css spec, therefore they can't do anything about it but hey why don't I consider contributing to the next round of the spec?对我来说这似乎是一个 firefox 错误,但毫无疑问如果我要报告它然后 mozilla 会告诉我它在原始的 css 规范中,因此他们对此无能为力但是嘿为什么我不考虑贡献下一轮规范? That's what happened the last time I reported a bug.
这就是我上次报告错误时发生的情况。 But I'm not bitter - after all was said and done, it turned out that they were perfectly correct.
但我并不苦涩——说到底,事实证明他们是完全正确的。 Wait a minute, No, actually I am still bitter.
等等,不,其实我还在苦涩。 Why am I still bitter?
为什么我还是很苦? I don't know, I just am.
我不知道,我只是。
The default style seems like it might be copied off the firefox chrome location bar, so maybe there's problems with inappropriately shared code.默认样式似乎是从 firefox chrome 位置栏复制而来的,因此可能存在不当共享代码的问题。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.