How to Handle Cross Browser CSS Problems

One of the common problems that WordPress developers face is dealing with cross browser issues. There are five major browses that most people use: Google Chrome, Internet Explorer, Mozilla Firefox, Apple Safari and Opera. And there are difference in how each one renders HTML and CSS elements. Plus there may be differences in how these browsers handle JavaScript code.

Not long ago I came across a easy way to handle CSS differences among different browsers. In the past I had to write code to determine which browser was viewing the site. Then I would have to add conditional statements to the WordPress theme to render the page correclty. Now I can handle these differences in the theme’s style sheet.

First I need to add a little JavaScript code to the sites head section:

<script>
    // deterime what browser we are using
    var doc = document.documentElement;
    doc.setAttribute('data-useragent', navigator.userAgent);
</script>

Now we will are able to write browser specific code in the theme’s style sheet.

Here is how we would write a CSS rule for Internet Explorer 8-10:

html[data-useragent*='MSIE 10.0'] .main-menu,
html[data-useragent*='MSIE 9.0'] .main-menu,
html[data-useragent*='MSIE 8.0'] .main-menu {
  margin-top: 20px;
}

We just have to know what the user agent string is for our target browser. To find out what that string is for a particular browser, start up the target browser up and visit a site such as whatsmyuseragent.com where it will show lots of information including the browser type. Just use the part that refers to the browsers such as Chrome or Firefox.

For Internet Explorer 11, the identifier for has changed from, ‘MSIE 10.0’, in IE 10, to ‘rv:11.0’ make the CSS code:

html[data-useragent*='rv:11.0'] .main-menu {}

This method makes handling cross browser CSS issues very easy and specific to fix.

About Me