If your web pages display differently in Safari and Chrome as opposed to Internet Explorer and Firefox, you can use this cool CSS trick to correct the differences. Chrome and Safari use variations of the Webkit rendering engine.
The example below is a snippet of .CSS code that adds a top padding of 60px to a page's title element. It works fine in Firefox and IE, but when rendered in Safari and Chrome, the title is too close to the page's logo.
1 | .title-section { padding: 60px 0 0; } |
The code below will become effective in any Webkit based browser. The pages now appear the same way in Chrome and Safari as they do in IE and Firefox with the above code.
1 2 3 4 | /* to fix rendering differences in Chrome and Safari */ @media screen and (-webkit-min-device-pixel-ratio:0) { .title-section { padding: 120px 0 0; } } |
Hello Sir,
do i have a specific conditional css statement for safari?
please let me know if we have?
thanks
Lohith,
Safari and Chrome are both webkit based. The conditional CSS is the same for both browsers: @media screen and (-webkit-min-device-pixel-ratio:0)