CODEWITHSUNDEEP
cssgoogle-chromefirefox
sreekanth
sreekanth

Reputation: 1000

Web pages which works fine in Firefox shows some styling issues in Chrome

I am newbie to web development, in specific browser related css compatibility issues.

I have the following css in my home page, which works fine in Firefox, and I can see the css properties when I inspect the element using firebug. But the same css rules are missing when I use chrome. when I inspect, I can't even see the rules in chrome. I wonder why this happens. I understand that some css rules are browser dependent. But now am really confused by thinking how could I resolve this.

Please refer to this link to see my css rules.

Any suggestions regarding why and how this happens. Any useful link also will be appreciated. Thanks in advance.

Upvotes: 3

Views: 66

Answers (1)

Stinodotbe
Stinodotbe

Reputation: 402

Try using a media query, selecting only webkit specific stuff such as:

@media screen and (-webkit-min-device-pixel-ratio:0) {
  /* Your CSS */
}

This query checks the device pixel ratio in webkit. Safari & Chrome are the only big browsers using webkit, so this will not affect FireFox or IE.

Upvotes: 1

Related Questions