html CSS float: right avec img ne fonctionne pas bien

Question

HTML

<table class='titleStatus' id='title'> 
     <tr> 
      <td class='lefttop'></td> 
      <td class='bar'>Punch Data 
       <img class='minMaxClose' src='images/close.png'> 
       <img class='minMaxClose' src='images/max.png'> 
       <img class='minMaxClose' src='images/minimize.png'> 
       <img class='minMaxClose' src='images/setting.png'></td> 
      <td class='righttop'></td> 
     </tr> 
    </table> 

CSS

.minMaxClose{float: right;} 

à IE OutPut

Alors que i besoin d'une sortie comme sur Firefox

Answer 1

HTML

<table class='titleStatus' id='title'> 
     <tr> 
      <td class='lefttop'></td> 
      <td class='bar'>Punch Data 
         <!--[if IE]> 
          <div class='ico-wrapIE'> 
         <![endif]--> 
         <!--[if !IE]> 
          <div class='ico-wrap'> 
         <![endif]--> 
       <img class='minMaxClose' src='images/setting.png'> 
       <img class='minMaxClose' src='images/minimize.png'> 
       <img class='minMaxClose' src='images/max.png'> 
       <img class='minMaxClose' src='images/close.png'> 
      </div> 
      </td> 
      <td class='righttop'></td> 
     </tr> 
    </table> 

CSS

.ico-wrap{float:right;} 
.ico-wrapIE { 
    position: absolute; 
    right: 2px; 
    top: 2px; 
} 

Answer 2

appliquer float: left à toutes les images d'abord, puis appliquer float: droit à votre conteneur contenant des images

.bar img{ 
float:left;//for shifting alongside 
} 


.bar{ 
float:right;//for shifting entire division to right side 
} 

Answer 3

http://jsfiddle.net/Am34U/3/ donner la barre d'une largeur de 800px ou quelque chose, et disons que vous mettez du punch dans une travée et que vous lui donnez une portée de 300px et que vous laissez flotter à gauche, et donnez à la travée qui contient les images une portée de 500px et laissez-la flotter à gauche aussi.

HTML

<table class='titleStatus' id='title'> 
     <tr> 
      <td class='lefttop'></td> 
      <td class='bar'> 
       <span id="punch">Punch Data</span> 
       <span id="close"> 

        <img class='minMaxClose' src='images/close.png'> 
        <img class='minMaxClose' src='images/max.png'> 
        <img class='minMaxClose' src='images/minimize.png'> 
        <img class='minMaxClose' src='images/setting.png'> 
       </span> 
      </td> 
      <td class='righttop'></td> 
     </tr> 
</table> 

CSS

.minMaxClose{ 
    float: right; 
} 
#close{ 
    background: purple; 
    width: 400px; 
    float: left; 
} 
#punch{ 
    background: orange; 
    width: 300px; 
    float: left; 
} 
.bar{ 
    width: 700px; 
    background: blue; 
}