Categories
Tag Cloud
CSS Compatibilty issues in Different Browsers
- 28
-
Tired of reading? Press play to listen instead. N/B. Might not work on some articles
Ready
- Internet Explorer Browser, Safari Browser
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!
