10 ways to overcome problems in IE6

1. Use the DOCTYPE

It is always better to prescribe the doctype in the header of each html page, and strict mode is recommended:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

for XHTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

From myself I will add that do not allow any third-party characters before the doctype. No spaces, no line breaks - otherwise body and html will have strange fields

2. Set position: relative

By using this hack, you can cure a huge number of problems in the layout in IE6 (for example, invisible or strangely positioned blocks.
')

3. Apply display: inline to floating blocks

Margin floating elements with a margin can trigger a known IE6 double margin bug.
For example, we specify the margin to the left at 5px and as a result we get 10px. display: inline corrects the problem, but CSS remains valid

4. Set the hasLayout property

Many rendering errors in IE6 (and IE7) can be fixed by setting the hasLayout property. This is an internal feature (or crutch ?, approx. Transl.) IE, which indicates how the content should be aligned and positioned relative to other elements. Also, this property can be used when you need to turn a lowercase element (for example, <a>) into a block element or to impose transparency effects.

The easiest way to set this value is to set height or width (zoom can also be used, but this one is not part of the CSS standard). It is recommended to set the actual dimensions of the block, and if this is not possible (the height changes dynamically), then you can do so: height: 1px. Also, if no height is set for the parent block, the height value for the element does not change, and hasLayout is already enabled.

5. Fix duplicate characters

Oh, this bug! It appears in lists when the last 1-3 characters of the last item in the list are duplicated on a new line. There are several solutions:

- use display: inline for floating elements;
- set margin-right: -3px; on the last item in the list;
- conditional comments can be used;
- add an empty div to the last element of the list (sometimes, you must specify the width: 90% or another suitable value for the width;

Here you can learn more about the problem.

6. Only allow “a” tags for clickable and: hover elements.

Since IE is a stand-alone and alternative-minded browser, it does not recognize any other tags for these cases.
Of course, you can use other tags in conjunction with the java script, but is best suited.

7. Advanced CSS selectors for sane browsers, usual ones for IE or use! Important

It is possible to write valid code and apply styles to share styles for donkey and other browsers without third-party files.
IE6 does not understand 'min-height' and incorrectly switches height: auto to 20em.

#element {
min-height: 20em;
height: 20em;
}
/* ignored by IE6 */
#element[id] {
height: auto;
}

8. Avoid percentage values for fields.

Percentages drive IE into a stupor. You can continue writing dimensions as percentages using! Important for other browsers, and for donkey in pixels:

body {
margin: 2% 0 !important;
margin: 20px 0; /* IE6 only */
}

9. Test always and often.

Never leave the layout in IE is not tested "for later." Problems will take more time to solve them. If the layout is correctly displayed in FF and IE6, then it will not collapse in other browsers.

10. Refactoring

However, it is often much longer to fix a bug than to rewrite the problem area again. Simpler HTML and simpler CSS are often more efficient.

I'd add from myself, about the popular hacks _margin, * margin, which only IE understands, but the code is not valid, promote the browser update.

Inspired by this . Free translation.

Source: https://habr.com/ru/post/76962/

All Articles