Internet Explorer 6 and, to a less extent, 7, are both affected by some obtuse bugs concerning the styles applied to links. These bugs fall into two categories: block-level bugs and inline bugs. The former category applies to links that are turned into block-level elements, whereas the latter affects inline links. A typical example of the former is when you omit a dimension on links (either width or height). This bug can be easily fixed by adding height: 1px; to the link in question. Another use case if when you have an horizontal menu with floats and you omit to specify the float property for links. In IE 6, this will make links to expand abnormally. To fix this bug, simply do the following:
#navigation a {
float: left;
display: block;
height: 100%;
}
The second category, instead, covers all the CSS styles applied to inline links. The most evident bug of this category is the disappearing of background images on inline links. This bug affects both IE 6 and 7. To fix this bug, you have to follow a two-steps approach:
- use conditional comments and set the MS
zoomproperty to 1:<head> <!--[if lte IE 7]> <style type="text/css"> .inline-fix {zoom: 1;} </style> <![endif]--> </head> - if this declaration alone doesn't work, use also
display: inline
Another bug that I sometimes encountered occurs when you have a breadcrumb menu with a specified height and both IE 6 and 7 crop the text of links because they "think" that the menu is not tall enough. In this case, sometimes omitting the height declaration is helpful.