What are the common compatibility issues in the front end? How do I fix it?

When we write a web page, which is often called an HTML file, we need to run it to show it as a web page. D ifferent browsers can cause different results to work differently, which is a compatibility issue. W hat are some of the common compatibility issues in the front end that are compiled in this article, W3Cschool? How do I fix it?

Browser compatibility

Compatibility issues occur because of differences in the browser kernel, resulting in differences in resolution. There are two main types of browser kernels that we commonly use: the rendering engine and the js engine.

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

Common compatibility issues:

• Labels for different browsers default to external patches (margin) and internal patches (padding). M argin and padding vary widely without style. This is the most common browser compatibility issue, but it is also the best one to address.

How to fix it: Add wildcards to css * { margin: 0; padding: 0; } ​

• The block property label sets the float while setting margin, and in the IE6 run, the next piece is toped to the next line.

How to fix it: Add display:inline to the float style label to convert it into in-row properties.

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

How to fix this: Set overflow：hidden for labels that exceed height, or set the value of line-height to be less than the height you set.

• Pictures are spaced by default. When several img tags are put together, some browsers have default spacing, even with wildcards.

How to fix it: Use float for img layout

• td Wrap problem. Table width is fixed and td wraps automatically.

How to fix: Set table style to table-layout：fixed，td为word-wrap：break-word

• IE9 browsers can't use opacity at once

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

• The following version of IE7, line-height, is invalid. In Internet Explorer, line-height does not work when img is placed with text.

How to fix it: Both are set to float

• Margin overlap, when both adjacent elements have a margin margin set, margin will take the maximum value, discard the minimum value;

How to resolve: In order not to overlap the edges, you can add a parent element to the child element and set the parent element to overflow:hidden

• cursor:Hand shows that the hand type is not supported on safari.

How to fix it: Use cursor:pointer uniformly.

• Two block-level elements, the parent element sets overflow:auto; And the height is greater than the parent element, and browsers below IE7 are hidden rather than overflowed.

How to fix it: Parent element position:relative

These are common front-end compatibility issues for small orchestration, as well as solutions to compatibility issues. For more front-end compatibility issues to resolve, follow the HTML tutorial.