Sometimes it is the Gecko engine (Firefox) that misbehaves. What would be best way to target only Firefox with your CSS rules and not a single other browser? That is, not only should Internet Explorer ignore the Firefox-only rules, but also WebKit and Opera should.
This is probably the most clean and easy solution out there and does not rely on JavaScript being turned on.
html code
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
@-moz-document url-prefix() {
h1 {
color: red; }}
</style>
</head>
<body>
<h1>This should be red in FF</h1>
</body>
</html>
It’s based on yet another Mozilla specific CSS extension.
Here is how to tackle three different browsers: IE, FF and Chrome
css code
<style type='text/css'>
/*This will work for chrome */
#categoryBackNextButtons
{
width:490px;}
/*This will work for firefox*/
@-moz-document url-prefix()
{
#categoryBackNextButtons
{
width:486px; }}
</style>
<!--[if IE]>
<style type='text/css'>
/*This will work for IE*/
#categoryBackNextButtons
{
width:486px;
}
</style>
<![endif]-->
Here is some browser hacks for targeting only the Firefox browser,
Using selector hacks.
css code
_:-moz-tree-row(hover), .selector {}
JavaScript Hacks
css code
var isFF = !!window.sidebar;
var isFF = 'MozAppearance' in document.documentElement.style;
var isFF = !!navigator.userAgent.match(/firefox/i);
Media Query Hacks
This is gonna work on, Firefox 3.6 and Later
css code
@media screen and (-moz-images-in-menus:0) {}
Using -engine specific rules ensures effective browser targeting.
html code
<style type="text/css">
//Other browsers
color : black;
//Webkit (Chrome, Safari)
@media screen and (-webkit-min-device-pixel-ratio:0)
{
color:green;
}
//Firefox
@media screen and (-moz-images-in-menus:0)
{
color:orange;
}
</style>
//Internet Explorer
<!--[if IE]>
<style type='text/css'>
color:blue;
</style>
<![endif]-->
you can use this:
css code
body:not(:-moz-handler-blocked) h1
{
color: red;
}
<h1>This should be red in FF</h1>
Wikitechy Founder, Author, International Speaker, and Job Consultant. My role as the CEO of Wikitechy, I help businesses build their next generation digital platforms and help with their product innovation and growth strategy. I'm a frequent speaker at tech conferences and events.
Add Comment