IE7 - 在新线上浮动元素

Question

（抱歉，因为这可能是这个bug的第几个版本，但我已经搜索了这个问题的各种版本，并尝试了各种版本的建议修复，但到目前为止我还没有一个有效的修复。）

我试图将2个按钮浮动到标题栏的右端。 它们必须作为一个或两个浮动，或者两者都不显示（它们是重新显示页面上隐藏元素的按钮）

这是一个将所需布局与IE7版本进行比较的图像。

Skydrive上的小JPG图像

如您所见，两个按钮（以及仅包含空格的填充div）位于标题栏下方而不是内部。

这是页面......

             <div class="divHeaderBar">
                Welcome To James Hay Online
                <div id="filler" style="display: inline-block; *display: inline; float: right; width: 20px; height: 10px; z-index: 60;"> </div>
                <div id="divShowApplyOnline" class="" style="display: inline-block; *display: inline; float: right; margin-top: 5px; height: 10px; width: 20px; z-index: 60; cursor: pointer;"
                    onclick="javascript:ShowApplyOnline()" runat="server">
                    <img title="Show the Apply Online section" src="/portal/images/details_open.png"
                    alt="Show the Apply Online section" />
                </div>
                <div id="divShowMainFeature" class="" style="display: inline-block; *display: inline; float: right; margin-top: 5px; height: 10px; width: 20px; z-index: 60; cursor: pointer;"
                    onclick="javascript:ShowMainFeature()" runat="server">
                    <img title="Show the News Feature section" src="/portal/images/details_open.png"
                    alt="Show the News Feature section" />
                </div>
            </div>

这是样式表中的一点造型......

.divHeaderBar {
   background-color:       #008DA9;
   color:                  White;
   font-weight:            bold;
   font-size:              10pt;
   line-height:            30px;
   text-indent:            10px;
}

我已经尝试摆弄位置：绝对和右：0，我已经尝试使用包含浮点数的div：left但是到目前为止我没有试过没有做过这个伎俩。

任何帮助将非常感激！

Answer 1

切换标记位置应该有助于：

     <div class="divHeaderBar">
        <div id="filler" style="display: inline-block; *display: inline; float: right; width: 20px; height: 10px; z-index: 60;"> </div>
        <div id="divShowApplyOnline" class="" style="display: inline-block; *display: inline; float: right; margin-top: 5px; height: 10px; width: 20px; z-index: 60; cursor: pointer;"
            onclick="javascript:ShowApplyOnline()" runat="server">
            <img title="Show the Apply Online section" src="/portal/images/details_open.png"
            alt="Show the Apply Online section" />
        </div>
        <div id="divShowMainFeature" class="" style="display: inline-block; *display: inline; float: right; margin-top: 5px; height: 10px; width: 20px; z-index: 60; cursor: pointer;"
            onclick="javascript:ShowMainFeature()" runat="server">
            <img title="Show the News Feature section" src="/portal/images/details_open.png"
            alt="Show the News Feature section" />
        </div>
        Welcome To James Hay Online
    </div>

首先是正确的浮动元素 - 然后是其他所有元素。 这样，IE7应该正确浮动它们。

提示::考虑分离HTML，CSS和Javascript。 内联CSS和内联事件处理程序不是一个好主意。 关注点的分离将提高可读性和可维护性。