Categories
Tag Cloud
CSS Compatibilty issues in Different Browsers
CSS compatibility issues in different browser can be a major issue especially when serving a disparate audience. You might have concentrated working on your css using Mozilla only to find the appearance is completely distorted and different from what you envisioned. Well there is a solution for you, here are tested ways to correct or fix compatibility issues in different Browser
1. Internet Explorer Browser
/** Internet Explorer */@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {div {display: block;}}
2. Microsoft Edge Browser
/** Microsoft Edge */@supports (-ms-ime-align: auto) {div {display: block;}}
3. Mozilla Firefox Browser
/** Mozilla Firefox */@-moz-document url-prefix() {divdisplay: block;}}
4. Safari Browser
/** Safari */@media not all and (min-resolution: 0.001dpcm) {divdisplay: block;}}
5. Chrominum based Browser
/** Chrominum */@media screen and (-webkit-min-device-pixel-ratio: 0) and (min-resolution: 0.001dpcm) {div:not(*:root) {display: block;}}
Recommendation
Most browsers are Chrominum based while the most used browser is Google Chrome, for this reason its recommended that you do your test run with Google Chrome.
Credits: BrowserStack
Hope you find this helpful, to help someone else do not forget to hit the thumbs up button. God bless you in Christ Jesus!
CSS compatibility issues in different browser can be a major issue especially when serving a disparate audience. You might have concentrated working on your css using Mozilla only to find the appearance is completely distorted and different from what you envisioned. Well there is a solution for you, here are tested ways to correct or fix compatibility issues in different Browser
1. Internet Explorer Browser
/** Internet Explorer */@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {div {display: block;}}
2. Microsoft Edge Browser
/** Microsoft Edge */@supports (-ms-ime-align: auto) {div {display: block;}}
3. Mozilla Firefox Browser
/** Mozilla Firefox */@-moz-document url-prefix() {divdisplay: block;}}
4. Safari Browser
/** Safari */@media not all and (min-resolution: 0.001dpcm) {divdisplay: block;}}
5. Chrominum based Browser
/** Chrominum */@media screen and (-webkit-min-device-pixel-ratio: 0) and (min-resolution: 0.001dpcm) {div:not(*:root) {display: block;}}
Recommendation
Most browsers are Chrominum based while the most used browser is Google Chrome, for this reason its recommended that you do your test run with Google Chrome.
Credits: BrowserStack
Hope you find this helpful, to help someone else do not forget to hit the thumbs up button. God bless you in Christ Jesus!
