The height of the blue bar in Safari and Chrome matches but in Firefox it is smaller. I would like to make them equal.
You could use a css hack for firefox:
#-moz-document url-prefix() {
header {
height:50px; /* or whatever fits best there */
}
}
This should only be interpreted by Firefox, while Opera, Chrome and Safari will use the default header {...} definition
Related
This answer says we can target Firefox using the following CSS:
#-moz-document url-prefix() {
h1 {
color: red;
}
}
<h1>This should be red in FF</h1>
I want to apply a CSS rule to all browsers except gecko/Firefox, as the CSS rule doesn't display properly in Firefox.
How do I use CSS to target everything except Firefox?
Thanks.
My stylesheet currently uses a fixed background image which works great in all browsers except IE. How do I disable the fixed background ONLY in Internet Explorer Edge? The more specific, the better as I have no idea how the #supports work.
See the answer here for targetting IE edge: https://stackoverflow.com/a/32202953.
#supports (-ms-ime-align:auto) {
.selector {
property: value;
}
}
I need to define float:none!important; for mozilla only, because in another browsers I need float:left.
It's there a manner to define float for mozilla only? Standard solution with -moz-float... prefix doesn't works
use this and put your mozilla css only inside this
it should be only affect mozilla browser
#-moz-document url-prefix() {}
you can try this:
#-moz-document url-prefix() {
#my-id { font-size: 100%; }
}
This website has more options as well
You can place this in your CSS file or between your <style type='text/css'> tags in your HTML. Works Fine!
That begin with prefix
"-moz". Prefix "-moz"
combined with -document url-prefix() is used in particular when creating additions to Firefox.
/* Firefox */
#-moz-document url-prefix()
{
#your-id { float: left; }
}
CSS hacks for Mozilla Firefox, Opera, Safari and Internet Explorer
Is it possible to have only one CSS property different in Chrome in comparison to Firefox?
A certain element has absolute positioning and is displaying correctly in Firefox but in Chrome it appears 2 pixels lower.
To target just Firefox use this:
<style type="text/css">
#-moz-document url-prefix() {
h1 {
color: red;
}
}
</style>
<h1>This should be red in FF</h1>
I got this answer from another stack overflow question:
Targeting only Firefox with CSS
You can test this by opening the following jsFiddle in both browsers: jsFiddle
Is there a way to specify some CSS that firefox can read but webkit browsers cannot, or visa versa?
Seems you are not alone who wants this:
Targeting only Firefox with CSS
And you can view more tricks here:
http://stephenkui.com/code-css-only-to-firefox-ie-or-safari/
You could use javascript to do that..
there is also a hack
#-moz-document url-prefix() {
#my-id { font-size: 100%; }
}
This should target only firefox and not other browsers