如何获取使用（进度）栏在IE中​​正确显示 [英] How to get usage(progress) bar to display properly in IE

问题描述

 < div class =dd> 
< div class =bluestyle =WIDTH：$ s％> $ s％< / div> 
< div class =greenstyle =WIDTH：$ v％> $ v％< / div> 
< div class =redstyle =WIDTH：$ g％>< br> $ g％< / div> 
< / div> 
  

在FF中，三个不同的元素显示在单个状态栏上，显示数量的累积。然而，在IE中，它都被搞砸了。我得到每个元素的单独的酒吧，颜色和对齐都是关闭。

CSS：

  / *在同一状态栏上* / 
 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; 
} 
  

解决方案

$ 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).

这篇关于如何获取使用（进度）栏在IE中​​正确显示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！