width Problem Opera

CSS Labor: CSS 1 Element "width" Problem mit Opera und Konqueror

Beim Experimentieren mit einer Balkengrafik ist mir aufgefallen, das Opera 9.x/10.x/11.x und Konqueror 3.5.x ein Problem mit dem CSS 1 Element width haben, wenn bei der Breitenangabe in Prozent eine Nachkommastelle verwendet wird. Wie es aussieht können Opera 9.x/10.x/11.x und Konqueror 3.5.x nur mit Ganzzahlen das CSS Element width richtig interpretieren.

width = 50.0%
width = 50.2%
width = 50.4%
width = 50.6%
width = 50.8%
width = 51.0%

Es sollte eine leichte Abschrägung sichtbar sein. Opera 9.x/10.x/11.x und Konqueror 3.5.x zeigen nur bei "51.0%" einen Unterschied, die Nachkommastellen bei "50.x%" haben alle die gleiche Breite.

CSS Part:


    .widthtestbox {
      margin: 2em 0 2em 0;
      padding: 0.2em;
      width: 99%;
      color: #333;
      background-color: #ddd;
      border: 1px dotted #eee;
    }

    .widthbox50 {
      margin: 0; 
      display: block;
      width: 50.0%;
      height: 1.5em;      
      background: #99ccff;
      border: 1px solid #fff;    
    }

    .widthbox502 {
      margin: 0; 
      display: block;
      width: 50.2%;
      height: 1.5em;      
      background: #99ccff;
      border: 1px solid #fff;    
    }
    
    .widthbox504 {
      margin: 0; 
      display: block;
      width: 50.4%;
      height: 1.5em;      
      background: #99ccff;
      border: 1px solid #fff;    
    }
    
    .widthbox506 {
      margin: 0; 
      display: block;
      width: 50.6%;
      height: 1.5em;      
      background: #99ccff;
      border: 1px solid #fff;    
    }
    
    .widthbox508 {
      margin: 0; 
      display: block;
      width: 50.8%;
      height: 1.5em;      
      background: #99ccff;
      border: 1px solid #fff;    
    }
    
    .widthbox51 {
      margin: 0; 
      display: block;
      width: 51.0%;
      height: 1.5em;      
      background: #99ccff;
      border: 1px solid #fff;    
    }

(X)HTML Part:


     <div class="widthtestbox">
       <div class="widthbox50">width = 50.0%</div>
       <div class="widthbox502">width = 50.2%</div>
       <div class="widthbox504">width = 50.4%</div>
       <div class="widthbox506">width = 50.6%</div>
       <div class="widthbox508">width = 50.8%</div>
       <div class="widthbox51">width = 51.0%</div>         
     </div>

Nach oben

Nach oben