Five solutions to cross-browser problems (summary)

Brief review: Browser compatibility issues are often a headache. Here are five tips to avoid these problems.

1. Prefix CSS3 styles

If you’re using any kind of modern CSS snippets, such as box-sizing or background-clip, make sure you use the appropriate prefixes.

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

2. Use reset

You can use normalize.css, here is the one I use, 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 width

When you add padding that is the width of an element, it becomes larger. The width and padding will be added together.
To fix this, you can add this:

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

4. Clear float

If it is not cleaned, problems can easily occur. If you are interested, you can read this article by Chris Coyier.

This can be cleared using this CSS snippet:

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

If you wrap most of your elements a very easy way to do this is to add this to your wrap class.

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

Done!

5. Testing

Create your own cross-browser infrastructure or just use Endtest.
If you make these things a habit, you can probably solve 90% of browser problems.

Original link:

5 Tricks to Avoid Cross Browser Issues

The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM.