css - Internet Explorer 不显示具有相对定位和正确 float 的按钮

Question

我正在使用一个名为 Impromptu 的 jQuery 插件。它基本上是一个用于清洁模式框的插件。在模态框的底部，它有一个按钮栏，但后来在代码中我不得不使用更多的 JS 来动态添加一个额外的按钮，但位于左侧。它在除 IE 之外的所有浏览器中看起来都很好(未测试 6 或 8，但此问题出现在 IE 7 中并在 9 中修复)。

请在此处查看图片:http://screencast.com/t/g1EmKu2KqXfB

除了两个额外的属性:position:relative 和 float:left 之外，左边的按钮与右边的按钮具有相同的类。在包含按钮的 div 之后，我添加了一个带有 clear:left 的额外 div，但这似乎没有任何影响。

按钮本身是简单的 button 元素，语法相当繁重。例如，这是新添加的(有问题的)按钮的 HTML:

<button value="next" onclick="somefunction()" id="jqi_state0_buttonNext" name="jqi_state0_buttonNext" class="dynamo_temp_button">Next Page</button>

.dynamo_temp_button 是具有前面所述的 position:relative 和 float:left 的类。

如何使按钮与其他按钮保持在同一行，但保持其位置 float 在左侧？

fiddle :http://jsfiddle.net/rRFqv/

Answer 1

右侧2个按钮没有 float ，IE无法对齐非 float 和 float

试试这个演示:

jsfiddle

div.jqi .jqibuttons{
    text-align: right;
    padding: 5px 0 5px 0;
    border: solid 1px #eeeeee;
    background-color: #f4f4f4;
    overflow: hidden; //added
}
div.jqi button{
    padding: 3px 10px;
    margin: 0 10px;
    background-color: #2F6073;
    border: solid 1px #f4f4f4;
    color: #ffffff;
    font-weight: bold;
    font-size: 12px;
    background-image: none;
    float: right; //added
}
.dynamo_temp_button {
    position : relative;
    float : left!important; //added
}