如何在 IE7 中水平对齐按钮（以不同的形式）

Question

我有以下包含 3 个按钮的代码：

<div id="button-panel">
    <form action="../edit/" method="GET">
     <input type="hidden" name="id" value="<?php echo $record->id; ?>" />
     <input type="submit" value="Edit" />
    </form>

    <form action="" method="POST">
     <input  type="submit" name="cancel_btn" value="Cancel" />
    </form> 

  <input type="button" id="boh-url-gen" value="Generate URL" onClick="generateURL();" />                    
</div>  <!-- button-panel -->

尽管我努力，IE7 中的按钮还是垂直对齐。目前我应用了以下 CSS：

#button-panel *{display:inline-block;}

但是，它无法在 IE7 上运行。

Answer 1

这仅仅是因为 IE7 不完全支持 display:inline-block。 Reference here.

如果您想要完全支持，只需浮动元素即可。

#button-panel {
    float:left; /* right */
}

注意，浮动元素会将其从流程中移除，因此您可能需要向父级添加类似 overflow:auto 的内容 - 假设内容正在折叠，因为未设置固定的 height/width。

Answer 2

IE7 不支持 display:inline-block 对默认为 block 的元素。

相反，display:inline 让它们表现得像 inline-block（IE7 太奇怪了）

因此，您可以使用条件 cmets 为 IE7 或 IE7 CSS hacks 创建样式表，使用 display:inline。例如：

*:first-child+html #button-panel { /* IE7 hack which is valid CSS */
    display: inline;
}

（来自this answer Alohci 的IE7 hack）