1

（很抱歉，这可能是这个错误的第 10 个版本，但我已经用谷歌搜索了这个问题的各种形式，并尝试了各种版本的建议修复，但到目前为止我还没有得到有效的修复。）

我正在尝试将 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;
}

我试过摆弄 position: absolute 和 right: 0，我也试过使用包含 div 和 float:left 但到目前为止我试过的都没有成功。

任何帮助将非常感激！

4

1 回答 1

4

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

     <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 和内联事件处理程序不是一个好主意。关注点分离将提高可读性和可维护性。

于 2012-11-23T14:40:49.143 回答