Profile:Browser compatibility issues are often a headache. Here are five tips to avoid them.

1. Prefix CSS3 style

If you are using any kind of modern CSS snippet, such as box-sizing or background-clip, be sure to use the appropriate prefix.

-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 the reset

You can use normalize. CSS, and here’s what I used, 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

As you add padding with a width of one element, it gets bigger. Width and padding will be added together.

To fix this, add this:

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

4. Remove the float

If you don’t clear it, it can easily go wrong. For those interested, check out this article by Chris Coyier.

You can use this CSS snippet to clear:

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

If you wrap most of the elements, a very simple way to do this is to add it to your wrap class.

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

Done!

5. Test

Create your own cross-browser infrastructure or just use EndTest.

If you make these things a habit, you’ll probably fix 90 percent of your browser problems.

Original link:
5 Tricks to Avoid Cross Browser Issues


Recommended reading:
What are some great self-taught programming channels on YouTube

Welcome to pay attention to: Zhihu’s column “Aurora Daily” guides Makers to read three high-quality English articles every day.