html css float：右边用img工作不正常

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

我需要像Firefox一样的输出

Answer 1

首先将float：left应用于所有图像，然后将float：right应用于包含图像的容器

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


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

Answer 2

http://jsfiddle.net/Am34U/3/给条形宽度为800px或者其他东西，并说你把一个打孔放在一个跨度内并给它一个300px的跨度并向左浮动，并给出包含图像的跨度为500px的范围并浮动也离开了。

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;
}

Answer 3

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;
}