Don’t Worry, You’re In The Right Place
A lot of these posts were originally on SureFireWebServices.com. So if you found them through search engines or clicking around, this is their new home :). Enjoy!
12

5 CSS Tricks to Avoid Cross Browser Issues

I was on a private forum today and someone asked about CSS Inheritance and how they can avoid issues when they go from Chrome to FireFox, etc. So I thought of a few way to minimize Cross Browser errors/issues and I’d like to share them with you today!

Always Do These To Avoid Cross Browser Issues and Cross Browser Errors

*Disclaimer: This isn’t going to make everything flawless, but it’s a damn good start. Also, I’m not including anything for Stupid IE, but these tips will still work with version 8 and above… maybe.

1. Prefix css3 styles

If you’re using any type of modern CSS snippets, like box-sizing, or background-clip, just make sure that you use the appropriate vendor prefixes.

-moz- /* Firefox and other browsers using Mozilla's browser engine */
-webkit- /* Safari, Chrome and browsers using the Webkit engine */
-o- /* Opera */
-ms- /* Internet Explorer (but not always) */

2. Use a reset

You can use normalize.css or just a simple reset found anywhere on the net. Here’s the one I use and it’s from the Genesis Framework Style Sheet.

html,body,div,span,applet,object,iframe,h1,h2,
h3,h4,h5,h6,p,blockquote,a,abbr,acronym,address,
big,cite,del,dfn,em,img,ins,kbd,q,s,samp,small,
strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,
dd,ol,ul,li,fieldset,form,label,legend,table,caption,
tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,
embed,figure,figcaption,footer,header,hgroup,input,menu,
nav,output,ruby,section,summary,time,mark,audio,video {
border: 0;
margin: 0;
padding: 0;
vertical-align: baseline;
}

3. Avoid padding with widths

When you add padding to an element with a width, it will end up much larger than what it should be. The width and the padding will be added together. So, if I have an element with the width of 100px, and I add a padding of 10px to that same element, then the awkward browser behavior will make that element 120px.

To fix that, add this to everything that you do from now on:

* { -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box; /* Firefox, other Gecko */
box-sizing: border-box; }

4. Clear your floats, always!

Make sure you clear your floats! If you don’t clear your floats, things will start acting weird. To learn more about how floats act on browsers, check out this article from Chris Coyier.

To clear your floats, use this snippet of CSS:

.parent-selector:after {
content: "";
display: table;
clear: both;
}

If you wrap most of your elements, a really simple way would be to add this to your wrap class.

.wrap:after {
content: "";
display: table;
clear: both;
}

Tada! Now your floats should be cleared.

5. Test it out!

Use VM Ware, browsershots, or just DL the browsers and check them out to make sure they work! =)

If you make these things a habit, you will drastically eliminate 95% of your cross browser issues.*

*I don’t guarantee my statistics.

Have any other CSS Tips to avoid Cross Browser Issues? Share in the comments!

Advertisement
About the Author
What's UP! This is my site, I write 99% of the articles on here. I'm also the owner of SureFireWebServices.com. I help out a lot of developers and designers getting into the web game. Helping is fun for me, so feel free to ask me any questions! I've made courses and have a membership as well to help get you on your feet!

12 comments on 5 CSS Tricks to Avoid Cross Browser Issues

  1. Carrie Dils says:

    I knew about #3 and not to add padding like that, but I did NOT know the workaround. Thanks!

    1. Jonathan says:

      You’re very welcome!

  2. Greg says:

    Thanks for these great tips, I’ll have to save these somewhere for future reference.

    1. Jonathan says:

      Great!!

  3. TJ Greene says:

    I just downloaded and install the newest version of a StudioPress theme I am using. It has all the recommendations you covered here and then some. I was really excited until I tested it with browserstack.com and saw that it had a lot of problems rendering in several browser/OS configurations.

    All IE configs. (IE8, IE9, IE10, IE11, on Mac & PC) didn’t render well at all (surprise!) and several Chrome & Safari configs. were also severely messed up. The previous version of the same theme, without these cross browser “improvements” worked flawlessly in all browser/OS configurations I tested.

    The problems included: the fonts were different sizes and often improperly centered; the data in the right column was pushed to the bottom of the page; and the page would be shrunk down and not fill the screen properly.

    I’m going to try your Font-Size Bug fix here –
    http:surefirewebservices.com/development/genesis-framework/genesis-rem-chrome-font-size-bug for the font rendering problems, but I’m still searching for a fix for the other problems. Any thoughts would be much appreciated.

    1. Jonathan says:

      Each browser is different and can have multiple solutions depending on the problems addressed. There’s no one solid answer. You’d have to address each problem individually. Not sure if it could be the theme or something else like a bad day at browser stack. They should definitely be rendering on the more modern browsers correctly included ie9, 10, etc.

      So unfortunately, I don’t have a one size fits all answer but I would just double check the css, make sure floats are cleared, etc., and also take a look at the responsive code.

  4. Kris says:

    Thank you Jonathan! You covered my exact problem using Genesis theme for my client. I was so frustrated I went to new theme on my own site. Wish I had found this sooner!

    1. Jonathan Perez says:

      Awesome! So happy I could help!

  5. king says:

    Hi Mate. This article is fantastic.
    My css menu is acting really stranely in ie 11 in aonther machine. Its all godd in my development machine. when i tested my site with anothe machine, my ccs menu is in chaos. How can i fix this.
    Please help me,.

Leave a Reply

Your email address will not be published. Required fields are marked *

Scroll to top