This is the 20th day of my participation in the August Text Challenge.More challenges in August

There are many types of browsers on the market, and the kernel of different browsers is not the same, so there are certain differences in the parsing of web pages by each browser.

I have listed some common compatibility problems and their solutions for your appreciation.

  1. Margin and padding are different by default for different browser tags.

Solution:

* {margin:0;padding:0; }Copy the code
  1. IE6 double margin bug: After the block property tag float, margin is displayed in IE6 larger than the set margin.

Solution: hack

div {
    display:inline; // Convert the target element to an inline attribute. }Copy the code

  1. Progressive recognition, the gradual elimination of parts from the whole. First, the clever use of the “9” mark separates Internet Explorer from all situations. Then, use “+” again to separate IE8 and IE7 and IE6, so that IE8 has been independently identified.

    {
    background-color:#f1ee18;/* All identified */
    .background-color:#00deff\9; /*IE6, 7, 8 recognize */
    +background-color:#a200ff;/*IE6, 7 recognition */
    _background-color:#1e0bd1;Identify * / / * IE6
}
Copy the code

  2. Set the small height label (usually less than 10px). In IE6 and IE7, the height is higher than the set height.

Solution: hack

Set overflow:hidden for tags out of height; Or set the line height to be less than the height you set.

  1. In Internet Explorer, you can obtain a custom attribute using the method of obtaining a general attribute or using getAttribute() to obtain a custom attribute. In Firefox, you can only use getAttribute() to obtain custom attributes.

Solution:

Obtain custom attributes using getAttribute().

  1. By default, text smaller than 12px will be displayed as 12px in the Chrome Chinese UI.

Solution:

You can do this by adding the CSS attribute -webkit-text-size-adjust: None; To solve.

  1. Hover styles no longer appear after a hyperlink is visited, and hyperlink styles visited by a click no longer have hover and active.

Solution:

Change the order of CSS properties :L-V-H-A (love hate): A :link {} A :visited {} A :hover {} A :active {}

  1. Cursor: Hand is not supported on Safari.

Solution:

Use cursor:pointer