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 / {{1} }未设置。

Answer 2

IE7不支持display:inline-block默认为block的元素。{/ p>

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

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

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

（this answer的Alohci IE7攻击

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

2 个答案: