Search code examples
cssgoogle-chromemozilla

Facing CSS cross-browser conflict [issues on Mozilla Firefox]

I have a class .a which has following CSS properties:

.a {
   display: flex;
   background: linear-gradient(red, green);
}

here I have an attribute defined for flex property

This works well in Google Chrome but when reviewing the site in Firefox, it results in some issues. Is there anything where you can help or any tool which converts the CSS rules to work for all browsers?

Solution

  • Try this : 

    .a {
 display: -webkit-box;
 display: -webkit-flex;
 display: -ms-flexbox;
 display: flex;
 background: -webkit-linear-gradient(red, green);
 background: linear-gradient(red, green);
}