Today we have faced such a situation like blured text in ie. We found that it is because of the opacity problem. We got a solution for this. This is very cool thing.
div style="width:100%;
filter:alpha(opacity=90);
font-weight:bold;
div
div style="width:100%;
filter:alpha(opacity=90);
font-weight:bold;
background-color:#fff"
div
This bug only occurs when the float margin goes in the same direction as the float and is trapped directly between the float and the inside edge of the container box. Any following floats with a similar margin won’t show the doubled margin. Only the first float in any given float row will suffer from the bug. Also, the doubled margin displays symmetry, working the same way to the right as it does to the left.
”This property specifies whether a box should float to the left, right, or not at all. It may be set for elements that generate boxes that are not absolutely positioned. The values of this property have the following meanings:
left
The element generates a block box that is floated to the left. Content flows on the right side of the box, starting at the top (subject to the ‘clear’ property). The ‘display’ is ignored, unless it has the value ‘none’.
right
Same as ‘left’, but content flows on the left side of the box, starting at the top.
none
The box is not floated. “
That means that {display: inline;} on a float should be ignored, and indeed all browsers show no changes in the float when this is done, including IE. But, this does somehow trigger IE to stop doubling the float’s margin. Thus, this fix can be applied straight, without any fussy hiding methods.
floatbox {
float: left;
width: 150px;
height: 150px;
margin: 5px 0 5px 100px;
display: inline;
}
Thanks to http://www.positioniseverything.net/explorer/doubled-margin.html
