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

This article mainly introduces what common bug in css, has a certain reference value, interested friends can refer to, I hope you can learn a lot after reading this article, the following let Xiaobian take you to understand.

1. Common mainstream browsers

1. Mainstream browser

Internet Explorer, Safari, Mozilla Firefox, Google Chrome, Opera, Baidu, 360, Sogou, Aoyou

two。 Earliest browsers:

Mosaic / Netscape Navigator (Netscape Leader) (1994-2008) is abbreviated to NN

Second, five browser kernels

Trident (MSHTML) (Trident; Trigeminal line; Trident harpoon)

Gecko (gecko)

Presto (rapid)

Webkit (Safari kernel, Chrome kernel prototype, it is Apple's own kernel, but also the kernel used by Apple's Safari browser)

Blink (browser typesetting engine developed by Google and Opera Software).

Third, the representative works of the five browser kernels

* Trident: IE, Maxthon, Tencent, Theworld window of the World, 360browser

Representative work IE, because IE is bundled in Windows, so it occupies a very high market share, also known as IE kernel or MSHTML, this kernel can only be applied to the windows platform, and is not open source.

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

* Webkit: representative works Safari, Chrome, is an open source project.

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

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

Fourth, why is there a browser compatibility problem?

As the major browsers are developed by different manufacturers, the core architecture and code used are difficult to reconcile, which provides a hotbed for all kinds of inexplicable Bug (code errors). Coupled with the various technical barriers set up by major manufacturers out of their own interests, the application of CSS is more troublesome than expected. The compatibility of browsers is something we have to overcome.

CSS Bug, CSS Hack and Filter

1. CSS Bug:

The problem that CSS style parses inconsistencies among browsers, or that CSS style does not display correctly in browsers, is called 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 personal unofficial changes to CSS code, or unofficial patches. Some people prefer to use patch (patches) to describe this behavior.

3. Filter:

Represents the meaning of a filter, which is a way to show or hide rules or declarations from a specific browser or browser group. Essentially, Filter is a type of Hack used to filter different browsers.

5. Some side effects of using Hack

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

There are usually two ways to design CSS Hack and Filter:

1) one is to use the browser's own Bug to hide or show styles or declarations

2) the other is to hide or show the style by taking advantage of the imperfection of browser support for CSS, such as the lack of support for some rules or syntax.

VI. Common CSS bug

1. The picture has a frame BUG

A border appears when the picture is added to the IE Hack: add border:0; or border:0 none to the picture

two。 Picture gap

Picture Gap BUG in div

Description: when you insert a picture in div, the picture expands the bottom of the div by about three pixels.

Hack1: write on one line with

Hack2: to be converted to a block element, add a declaration: display:block

Picture Gap in dt,li

Hack: to be converted to a block element, add a declaration: display:block

3. Double floating direction (double margin) (only IE6 appears)

Description: when Ie6 and earlier browsers parse floating elements, they mistakenly double the float to the edge boundary (margin).

Hack: add a declaration to a 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 declaration to the element: overflow:hidden

5. Inconsistent line height alignment of form elements

Description: inconsistent line height alignment of form elements

Hack: add a declaration to the form element: float:left

6. Button elements vary in size by default

Description: button elements vary in size from browser to browser

Hack1: uniform size / (simulated with a tag)

Put a label on the outside of hack2:input, write the style of the button in this label, and remove the border of input.

Hack3: if this button is a picture, just use the picture as the background image of the button.

7. Percentage bug

Description: when parsing percentages in IE6 and below, it is rounded, resulting in 50% plus 50% greater than 100%. (will also be affected by the system)

Hack: add a declaration to the floating element on the right:

Clear:right; means: clear the right float.

Clear:left: clear left float

Clear:both: clear 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 declaration. The pointer attribute value of the cursor attribute is recognized by IE6.0 and other kernel browsers.

Hack: if the mouse pointer shape of an element is hand-shaped

A declaration should be added: cursor:pointer

9. Transparency attribute

Compatible with other browsers: opacity:value; (value range of value is 0-1; example: opacity:0.5;)

IE browser: filter:alpha (opacity=value); value range: 1-100 (integer)

10. BUG of li list

1): vertical bug;Hack occurs when the parent element (li) has float:left; child element (a) and the child element (a) does not set float: set float for both parent element li and child element a

2): when the an in li is converted to block; and has height and float, the float is not set in li and the ladder display appears. Hack: add float to li at the same time

11. Margin overlaps up and down

Description: if no float is set between the current element (the first child element in the parent element) and the parent element, after setting margin-top, margin-top will be incorrectly added to the parent element

Css hack:

1. Add overflow:hidden; to the parent element (recommended)

2. Add floats to parent or child elements

12. Margin BUG

When two elements are arranged up and down, the upper element has margin-bottom:30px; and the lower element has margin-top:20px;, the distance between them will not be superimposed, but will be set to a larger value.

Thank you for reading this article carefully. I hope the article "what is the common bug in css" shared by the editor will be helpful to you? at the same time, I also hope you will support us and pay attention to the industry information channel. More related knowledge is waiting for you to learn!

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.