html - html css float:right with 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 的输出

而我需要像 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

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

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


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

Answer 3

http://jsfiddle.net/Am34U/3/给 bar 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;
}