Shulou(Shulou.com)06/01 Report--

Most people do not understand the knowledge points of this article "what are the common compatibility problems in the front end of web and how to solve them?" so the editor summarizes the following contents, detailed contents, clear steps, and has a certain reference value. I hope you can get something after reading this article. Let's take a look at this article, "what are the common compatibility problems in web front end and how to solve them?"

Browser compatibility

Compatibility problems arise because of parsing differences caused by different browser kernels. There are two main kinds of browser kernels, which are rendering engine and js engine.

There are four most common browser kernels: Trident,Gecko, Blink, and Webkit

IE browser Trident kernel Chrome browser Webkit kernel, now Blink kernel Firefox browser Gecko kernel, commonly known as Firefox kernel safair browser Webkit kernel Opera browser is now Blink kernel 360browser IE+Chrome dual kernel Cheetah browser IE+Chrome dual kernel Baidu browser IE kernel QQ Browser Trident (compatibility mode) + Webkit (high speed mode) common compatibility problems:

The default external patch (margin) and internal patch (padding) are different for tags in different browsers. There is a big difference between margin and padding without style. This is the most common browser compatibility issue, but it is also the best one to solve.

How to solve it: add wildcards * {margin: 0; padding: 0;} to css

The block attribute tag is set to float and margin is set at the same time, and in the IE6 run, the latter block is pushed to the next line.

How to solve it: add display:inline to the float style tag to convert it to an inline attribute.

When the height setting of the label is less than 10px, the height set by yourself will be exceeded in IE6 and IE7.

How to solve it: set overflow:hidden for tags that exceed the height, or set the value of line-height to be less than the height you set.

The picture has spacing by default. When several img tags are put together, some browsers have default spacing, even if wildcards are added.

How to solve: using float to layout img

Td automatic line wrapping problem. If the width of the table is fixed, the td will wrap automatically.

How to solve this: set the table style to table-layout:fixed,td to word-wrap:break-word.

IE9 browser cannot use opacity

How to solve: opacity: 0.5 position filter: alpha (opacity = 50); filter: progid:DXImageTransform.Microsoft.Alpha (style = 0, opacity = 50)

The following versions of IE7, line-height, are invalid. In IE browsers, line-height does not work when img is placed with text.

How to solve it: both are set to float.

The problem of margin overlap; when margin margins are set for two adjacent elements, margin will take the maximum value and discard the minimum value

How to solve it: to prevent edges from overlapping, you can add a parent element to the child element and set the parent element to overflow:hidden

Cursor:hand display hand type is not supported on safari.

How to solve it: use cursor:pointer uniformly.

Two block-level elements, the parent element sets the overflow:auto; child element and the position:relative is set; and the height is larger than the parent element, so browsers below IE7 will be hidden rather than overflow.

How to solve this: the parent element sets position:relative.

The above is about the content of this article on "what are the common compatibility problems in the front end of web and how to solve them?" I believe you all have a certain understanding. I hope the content shared by the editor will be helpful to you. If you want to know more about the relevant knowledge, please follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.