firefox字段的浏览器特定CSS填充 [英] Browser specific CSS padding for firefox field

问题描述

我有一个下拉列表在我的应用程序，为了使它的中心，我必须添加padding-top 10px，而在mozilla firefox，但在谷歌Chrome它不需要填充。如何定位选择列表以设置此浏览器特定。我希望我可以做如下：

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:

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

有什么想法怎么可以绕过这个？ fiddle的问题如下，如果你检查这个在chrome然后firefox，我想要的文字总是在中间

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

http://jsfiddle.net/uHDa6/

推荐答案

你的问题是：是的，可以将Mozilla专用的CSS放在样式表中。 （不在内联样式属性中。）

在这种情况下，您可以写

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

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

这是简单的 @document 规则的Mozilla前缀版本，无法被其他浏览器识别。

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

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

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.

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

在所有浏览器中都有所需的效果。请参见新的小提琴。

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

这篇关于firefox字段的浏览器特定CSS填充的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！