Question

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

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

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

正如您所看到的，两个按钮（以及仅包含空格的填充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和内联事件处理程序不是一个好主意。关注点的分离将提高可读性和可维护性。

IE7 - 在新线上浮动元素

1 个答案: