Big beard

Translation: the original huziketang.com/blog/posts/… 5 Tricks to Avoid Cross Browser Issues

Please indicate the source, keep the original link and author information

Browser compatibility issues are always a headache, and here are a few tips to avoid them.

1. CSS3 prefix

If you’re using the latest CSS code, such as box-sizing or background-clip, make sure you use the appropriate vendor prefix.

-moz- /* Firefox and other browsers that use the Mozilla browser engine */
-webkit- /* Safari, Chrome and other browsers that use the Webkit engine */
-o- /* Opera */
-ms- /* Internet Explorer (but not always IE) */Copy the code

2. Use style resets

You can use normalize.css or whatever style resets you can find on the web. I’m going to give you one from the Genesis framework.

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;
}Copy the code

3. Avoid using padding with width

When you add padding to an element that contains width, it is larger than it should be. Because width and padding are going to add together. For example, if the width of an element is 100px, add a 10px padding. Some browsers will display the element at 120px.

To fix the problem, do something like this:

* { -webkit-box-sizing: border-box; /* Safari/Chrome */
-moz-box-sizing: border-box; /* Gecko kernel browser */
box-sizing: border-box; }Copy the code

4. Clear the float

Make sure you get rid of all the floats, because if you don’t, something really weird could happen. To learn more about how browsers handle floats, see this article by Chris Coyier.

You can clean up the float with the following CSS code:

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

If you want to wrap most of your code, an easier way is to add it to your wrap class:

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

So your float is cleaned up.

5. Test it out

Build your own cross-browser test environment, or use Endtest.

If you make these five tips part of your daily development routine, you’ll avoid 95% of your cross-browser incompatibilities.

I’m currently working on a little book called React.js.