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

This article focuses on "analyzing CSS Bug, CSS Hack and Filter". Interested friends may wish to have a look at it. The method introduced in this paper is simple, fast and practical. Let's let the editor take you to learn "analyzing CSS Bug, CSS Hack and Filter".

1) the problem that CSS Bug:CSS style does not display correctly in different browsers is called CSS bug.2) CSS Hack: CSS, Hack refers to a technical method that is compatible with the correct display of CSS in different browsers, because they all belong to individual unofficial changes to CSS code, or unofficial patches. Some people prefer to use patch (patches) to describe this behavior. 3) Filter: means filter, which is a way to show or hide rules or declarations from a particular browser or group of browsers. Essentially, Filter is a type of Hack used to filter different browsers. * some side effects of using Hack reduce the readability of CSS code and increase the burden on the 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. IE6 common CSS parsing Bug and hack1) Picture Gap A) when inserting a picture directly into the element, a gap of about 3 pixels will be created at the bottom of the picture (the bug appears in IE6 and earlier versions) hack1: set the

Convert to block elements, give

Add statement: display:block;hack2: set img to vertical-align:top/middle/bottom; as long as it is not baseline2) double float (double margin) description: when Ie6 and earlier browsers parse floating elements, they will incorrectly double the float to the edge boundary. Hack: add declaration to floating element: display:inline;3) default height (IE6) description: in IE6 and below, some block elements have a default height (below 16px height) hack1: add declaration to element: font-size:0;hack2: add declaration to element: overflow:hidden 4) percentage bug description: when parsing percentages in IE6 and below, the percentage is rounded, resulting in 50% plus 50% greater than 100%. Hack: add a declaration to the floating element on the right: clear:right; means: clear the right float. 5) inconsistent height and alignment of form elements (IE,MOZ,C,O,S) description: inconsistent line height alignment of form elements hack: add a declaration to form elements: float:left; or vertical-align:top;2) the resolution of buttons in form elements is parsed according to the weird box model. 3) border:0;border:none; is not compatible with the following browsers when removing the border of the form control directly. * transparent writing 1. OpacityIE9 0room1: browsers 2.filter:alpha (opacity=1~100) above IE8; browsers below IE9 and IE9 6) list ladder BUG (in IE6 and earlier browsers) bug1: in the given child element, no floating attribute is set in the parent element, li ladder effect. Hack: setting a float to the parent element will solve this problem bug2: when you convert An in LI into a block element and set a fixed height, and write a float to the parent element, it will appear vertically in IE6 and later browsers. Hack: it can be solved by setting the left float for a. 8) Mouse pointer bug description: the hand attribute value of the cursor attribute is recognized only by IE browsers. Other browsers do not recognize the declaration. The pointer attribute value of the cursor attribute value IE6.0 and other kernel browsers all recognize the declaration. Hack: if the mouse pointer shape of an element is hand-shaped, a declaration should be added: cursor:pointer Extended content: mouse pointer cursor:crosshair (cross) pointer (hand) move (move) e-resize (right and up) ne-resize (move right and up) nw-resize (move up and left) n-resize (move up) se-resize (down and left) sw-resize (down and left) s-resize (move down) w-resize (move left) text (text) wait (waiting) help (help) I believe you have a deeper understanding of "analyzing CSS Bug, CSS Hack and Filter". You might as well do it in practice. Here is the website, more related content can enter the relevant channels to inquire, follow us, continue 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.