Browser remedies, bugs, and Solutions (Part II)

Solution | Browser

IE 6

This browser, which runs only on the Windows platform, is a poison to many CSS designers/developers. Since its release in 2001, its Trident engine and CSS parser have not been upgraded. The biggest difference compared to the IE 5.x (first published in 1999) on the Windows platform is the introduction of the DOCTYPE switch and the correction of a large number of CSS1 bugs in standard mode (standards).

Because its engine has not been upgraded since its first release, the Bug and solution documentation for it is basically complete, and you can find more detailed information from http://www.positioniseverything.net/explorer.html.

To display only the desired style for IE 5+, you can use the tan Hack, or you can call it the * HTML Hack.

div {color: green;}* html div { /* IE5+将会使用它 */color: red;}

In (X) HTML, it html is the root element (that is, the eldest, which has no parent element). Tank hack is actually going to select an element (in this case, yes div ), the descendant of which it belongs, html and this is the html offspring of any element (the model you see). In theory, this is not possible, so parsing the right browser will be ignored * html , but it seems that IE 5+ has implemented some html of the parent elements (what we don't know), ironically, accidentally let us solve a lot of problems, thank you for Bill, we bow to the Pacific direction ... ...

As for the IE 5+ hidden style, that's just too easy, using the CSS2, adjacent selectors, attribute selectors, etc., ie are not recognized (CSS specifications also have the description, for the unrecognized are ignored, ie also have strict adherence to the specification of the time), thus ignoring the whole rule. Like what:

body > #content {...}div + #content {...}div[id="content"] {...}

But I do not recommend that you do this because you are taking the risk of upgrading your browser. IE7 has supported these "advanced" selectors, so I do not recommend using the "advanced" selector for an outdated, incompatible browser to fix the work.

When we use CSS hack and filter, if you can, only old/outdated/obsolete browsers, do not use the current version of the browser, so as not to invalidate the upgrade. In addition, I also want to use hack and filter can be as legal as possible (valid), through the CSS Checker check. So for the asterisk/underline _ Plus attributes (property, also called the nature), and in the attribute and value of the addition of empty comments illegal hack, I do not mention here, I do not recommend you to check. To address this issue, I would suggest that you take a look at the stop Hacking of Csszengarden founder Dave Shea, or be Stopped.

So, let's make a list of Ie5+/windows's main bugs and solutions, and I hope that when I use this scenario, I can think about Dave Shea and the idea I mentioned earlier.

Ie5+/win Bugs and Solutions List Bug Solution

In a liquid (liquid) box, the content following a floating element disappears inexplicably (only IE6 occurs). The scientific name Peek-a-boo bugs.

Give the box a definition height: 1%; (but be aware of the IE 5.x/mac hidden).

/*\*/ * html div {height: 1%;}/**/

This is the famous Holly Hack (Salvation Hack?). Holy hack? ）。 It works by setting a very small height value for a block (1% is almost universal). However, ie 5+/win can expand the box to a sufficient height according to the content, that is to say, use it as a means height min-height . In most cases, Holly hack can make ie5+/win behave in a substantive way.

In a list element ( dl , ul ,), the background of a ol block-level element defined in a relative or floating position disappears. Scientific name disappearing List-background Bug

Define the relative positioning of the list element (but also note that the Ie5.x/mac is hidden because it does not have the same name, but how does it behave so differently?) ）

/*\*/ * html ul {position: relative;}/**/

Although not a very technical hack, use position: relative; can free you from most of the Ie5+/win's predicament. At the same time, many occasions you do not want to use, because it produces blocks (block) may be you do not need, so save some use it.

When certain connections are hover within a floating element, the bottom of the element is cut off. Scientific name Guillotine Bug

Use Holly Hack for the containing element.

An absolutely positioned element within a relative positioning element that does not trigger a scroll bar when its contents exceed the bottom of the page. A scientific name unscrollable Content Bug.

Use Holly Hack for the containing element.

When more than one floating element follows each other, the text in the last floating element is occasionally copied to the bottom when the annotation is added to the middle. The scientific name duplicate Characters bugs.

Do not set the floating element to a multiple width so that it does not reach the bottom of the containing element, or set or smaller for the last element margin-right: -3px; .

The boundary on the same floating direction of the floating element is twice times the set value.

div {float: left;margin-left: 100px;}

Set for floating elements display: inline; . Note: According to the recommendations of the World Service Consortium, it none should not be used on floating elements unless the value is display .

There is a 3-pixel interval between the text within a block-level element and the floating element. The scientific name three Pixel text-jog bugs.

Use Holly Hack for block-level elements.

The content contains floating elements that do not reach the bottom, and the block-level element that clears (clear) floats padding-top doubles.

Use Holly Hack for the cleared floating element.

The failure of the connection within the positioning container background-image .

Relative positioning to the connection.

A box is padding nested margin inside it, and the outer box is padding-top margin-top not added to the box.

The inside box is margin-top set to double the value.

The class and ID that begin with the underscore are ignored.

Prevents the naming of class and IDs at the beginning of an underscore.

The value of an absolutely positioned element is left computed based on the left edge of the first element within the container, not the container itself.

The value adjusted according to the actual situation left or the absolute positioning container.

tablemargin for settings are ignored (IE6 ignores all, Ie5.x/win only ignores margin-top and margin-bottom ).

To table outsource one div , and then to that div setting margin .

Do you hate IE6? It can occupy me so many pages alone as part of ... Do you hate IE? The first two parts are written about them ... In fact, our third chapter is very small, the essence of this part of the.