且构网

分享程序员开发的那些事...
且构网 - 分享程序员编程开发的那些事

如何获取使用(进度)栏在IE中​​正确显示

更新时间: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).