Firefox 字段的浏览器特定 CSS 填充

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/19569399/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-30 00:48:34  来源:igfitidea点击:

Browser specific CSS padding for firefox field

cssfirefoxwebkit

提问by Jay

I have a dropdown list in my application whereby in order to center it I must add padding-top 10px while on Mozilla Firefox but on google chrome it does not need the padding. How can I target the select list to set this browser specific. I was hoping I could have done something like the following:

我的应用程序中有一个下拉列表,为了将它居中,我必须在 Mozilla Firefox 上添加 padding-top 10px,但在 google chrome 上它不需要填充。如何定位选择列表以设置此浏览器特定。我希望我可以做如下事情:

select {
  -moz-padding-top: 10px;
  -webkit-padding-top: 0px;
}

Any ideas of how I could get round this? Fiddle of problem shown below, if you check this in Chrome and then Firefox, I want it so that text is always in middle

关于如何解决这个问题的任何想法?下面显示的问题,如果你在 Chrome 和 Firefox 中检查这个,我想要它,这样文本总是在中间

http://jsfiddle.net/uHDa6/

http://jsfiddle.net/uHDa6/

回答by Mr Lister

Note: the first part of this answer is now obsolete, as this feature has been removed from Firefox. For the real answer, read on from "However".

注意:此答案的第一部分现已过时,因为此功能已从 Firefox 中删除。对于真正的答案,请继续阅读“但是”。



The answer to your question is: yes, it's possible to put Mozilla-specific CSS in a stylesheet. (Not in an inline style attribute.)
In this case, you would write

您的问题的答案是:是的,可以将特定于 Mozilla 的 CSS 放在样式表中。(不在内联样式属性中。)
在这种情况下,您将编写

@-moz-document url-prefix() {
    select {padding-top:10px;}
}

which is simply the Mozilla-prefixed version of the @documentrule, that is not recognised by other browsers.

这只是@document规则的 Mozilla 前缀版本,其他浏览器无法识别。



However, the actual solution to the problem of the mismatched text position is to not set the height, but only the padding of the select. No hacks.

但是,实际解决文本位置不匹配问题的方法是不设置高度,只设置select的padding。没有黑客。

style="font-size: 14px; padding: 11px 0 11px 5px;"

That has the desired effect in all browsers. See new fiddle.

这在所有浏览器中都具有预期的效果。见新小提琴