Discuss browser compatibility issues and talk about common css bugs (summary)

In this chapter, we will discuss browser compatibility issues and talk about common css bugs. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you. .

1. Common mainstream browsers

1. Mainstream browsing Device
Internet Explorer, Safari, Mozilla Firefox, Google Chrome, Opera, Baidu, 360, Sogou, Maxthon

2. The earliest browser:
Mosaic / Netscape Navigator (1994-2008) referred to as NN

2. Five major browser cores

Trident (MSHTML ) (trident; trident line; three-pronged harpoon)
Gecko (Gecko)
Presto (rapid)
Webkit (Safari kernel, Chrome kernel prototype, it is Apple's own kernel and also Apple's The kernel used by the Safari browser)
Blink (a browser layout engine developed by Google and Opera Software).

3. Representative works of the five major browser cores

*Trident: IE, Maxthon, Tencent, Theworld, 360 Browser
The representative work is IE. Because IE is bundled with Windows, it has a very high market share. It is also called IE kernel or MSHTML. This kernel can only be applied to the Windows platform and is not open source.

*Gecko: The representative work Mozilla Firefox is open source. Its biggest advantage is that it is cross-platform and can run on major operating systems such as Microsoft Windows, Linux and MacOS X.

*Webkit: Representative works of Safari and Chrome are an open source project.

*Presto: Representative work Opera, Presto is a browser layout engine developed by Opera Software. It is also recognized as the fastest rendering engine in the world.

*Blink: Browser layout engine developed by Google and Opera Software, released in April 2013.

4. Why do browser compatibility issues occur?

Since major mainstream browsers are developed by different manufacturers, the core architecture and code used are difficult to recombine, which provides a way for all kinds of inexplicable bugs (code errors). hotbed. Coupled with the various technical barriers set up by major manufacturers out of consideration for their own interests, the application of CSS is more troublesome than imagined. Browser compatibility issues are something we must overcome.

CSS Bug, CSS Hack and Filter

1. CSS Bug:
The problem of inconsistent parsing of CSS styles in various browsers, or the inability of CSS styles to be displayed correctly in browsers, is called a CSS bug.

2. CSS Hack:
In CSS, Hack refers to a technique that is compatible with the correct display of CSS in different browsers, because they are all unofficial personal modifications to CSS code, or unofficial patches. Some people prefer to use patch to describe this behavior.

3. Filter:
means filter, which is a way to show or hide rules or statements for a specific browser or browser group. Essentially, Filter is a type of Hack used to filter different browsers.

5. Some side effects caused by using Hack

reduces the readability of CSS code and increases the burden of code.

There are usually two methods for designing CSS Hack and Filter:
1) One is to use the browser's own bugs to hide or display styles or statements;
2) The other is to take advantage of the browser's imperfect support for CSS, such as lack of support for certain rules or syntax, to hide or display styles.

6. Common CSS bugs

1. Pictures have borders BUG
When a picture is added to IE, a border will appear. Hack: Add border:0; or border:0 none;

2. Picture gap

Picture gap in div BUG
Description: When inserting a picture into a div, the picture will expand the bottom of the div by about three pixels.
Hack1: Write and on one line;
Hack2: Convert it to a block element and add a statement: display:block;

dt, picture gap in li
Hack: Convert to block element, add statement: display:block;

3. Double float (double margin) (only appears in IE6)
Description: When Ie6 and lower browsers parse floating elements, they will incorrectly double the floating margin.
Hack: Add a declaration to the floating element: display:inline;

4. Default height (IE6, IE7)
Description: In IE6 and below, some block elements have a default height (around 16px;)
Hack1: Add a declaration to the element: font-size:0;
Hack2: Add a statement to the element: overflow:hidden;

5. The row height alignment of form elements is inconsistent
Description: The row height alignment of form elements is inconsistent
Hack: Add a statement to the form element: float:left;

6. The default sizes of button elements are different
Description: The size of button elements in various browsers is inconsistent
Hack1: Uniform size/(simulated with a mark)
Hack2: Put a label around the input, write the button style in this label, and remove the border of the input.
Hack3: If the button is a picture, just use the picture as the background image of the button.

7. Percentage bug
Description: When parsing the percentage in IE6 and below, it will be calculated by rounding, resulting in a situation where 50% plus 50% is greater than 100%. (It will also be affected by the system)
Hack: Add a statement to the floating element on the right:
clear:right; Meaning: clear the right float.
clear:left: clear the left float
clear:both: clear the floats on both sides

8. Mouse pointer bug
Description: The hand attribute value of the cursor attribute is only recognized by browsers below IE9. Other browsers do not recognize this statement. The pointer attribute value of the cursor attribute is recognized by IE6.0 or above and other kernel browsers.
Hack: If you unify the mouse pointer shape of an element into a hand shape,
The statement should be added: cursor:pointer

9. Transparent attribute
Compatible with other browsers Writing method: opacity:value; (the value range of value is 0-1; Example: opacity:0.5; )
IE browser writing method: filter:alpha(opacity=value); value range 1-100 (integer)

10. BUG in li list
1): When the parent element (li) has float:left; the child element (a) does not set float, a vertical bug will occur; Hack: Set float for both the parent element li and the child element a;
2): When converting a in li to block; and it has height and float, if float is not set in li, a ladder display will appear. Hack: Add float to li at the same time;

11. Margin up and down Overlap
Description: When the current element (the first child element in the parent element) and the parent element do not have any floats set, after setting margin-top, margin-top will be added to the parent element by mistake
Css hack:
1. Add overflow:hidden; to the parent element (recommended)
2. Add float to the parent element or child element

12. margin BUG
When two elements are arranged one above the other, the upper element has margin-bottom: 30px; the lower element has margin-top: 20px; the distance between them will not overlap, but will be set to a larger value;

The above is the detailed content of Discuss browser compatibility issues and talk about common css bugs (summary). For more information, please follow other related articles on the PHP Chinese website!