更新时间:2023-01-13 08:53:10
$ s,$ v和$ g在您的HTML中做; < br>
< ; br>
,并将这些$值替换为实际百分比,加上100%,它在IE6中正常工作,除了左边距。但这是由双倍浮动边距错误造成的。 根据该文章,修复边缘的方法是在 div上设置
到显示
属性。 dd inline
。
说到这一点, c $ c> display:block 属性,因为float属性忽略了显示属性(除了IE,在某种程度上,如上面的bug修复所示)。
<div class="dd">
<div class="blue" style="WIDTH:$s%">$s%</div>
<div class="green" style="WIDTH:$v%">$v%</div>
<div class="red" style="WIDTH:$g%"><br>$g%</div>
</div>
In FF the three different elements are displayed on a single status bar, showing the accumulation of the quantities. However, in IE, it's all messed up. I get separate bars for each element and the colors and alignment are all off.
The CSS:
/*These are for multiple element types on same status bar */
div.dd {
/*position: relative; /* IE is dumb */
display: block;
float: left;
width: 500px;
height: 16px;
margin: 0 0 2px;
background: url("white3.gif");
margin-left:20%;
}
div.dd div.blue {
/*position: relative; */
background: url("blue.gif");
height: 16px;
width: 75%;
text-align:right;
display:block;
float: left;
}
div.dd div.red {
/*position: relative; */
background: url("red.gif");
height: 16px;
width: 75%;
text-align:right;
display:block;
float: left;
}
div.dd div.green {
/*position: relative; */
background: url("green.gif");
height: 16px;
width: 75%;
text-align:right;
display:block;
float: left;
}
What are $s, $v and $g doing in your HTML; and the <br>
, for that matter?
If I remove the <br>
, and replace those $ values by actual percentages that add up to 100% it works just fine for me in IE6, except for the left margin. But that's caused by the doubled float-margin bug.
The way to fix that margin, according to that article, is to set the display
property on div.dd
to inline
.
Speaking of which, you can remove all those display: block
properties you're using, because the display property is ignored for floats (except by IE, to some extent, as the above bugfix demonstrates).