Internet Explorer不显示相对定位和正确浮动的按钮

我正在使用名为Impromptu的jQuery插件。它基本上是一个干净的模式框插件。在模式框的底部有一个按钮栏，但后来在代码中，我不得不使用更多的JS来动态添加一个额外的按钮，但定位在左侧。它在所有浏览器中看起来都很好，除了IE浏览器（未测试过6或8，但这个问题出现在IE 7中并且在9中修复）。Internet Explorer不显示相对定位和正确浮动的按钮

在这里看到的图像：http://screencast.com/t/g1EmKu2KqXfB

按钮左边有相同的类作为与以正确的，但有两个额外的属性：position:relative和float:left。在持有按钮的div之后，我添加了一个额外的div与clear:left，但这似乎不影响任何内容。

按钮本身很简单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的类。

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

小提琴：http://jsfiddle.net/rRFqv/

来源

2012-08-12 Keir Simmons

请小提琴，所以我们可以看到html – Mark 2012-08-12 15:39:02

http://jsfiddle.net/rRFqv/ – 2012-08-12 15:47:32

有在右边的2个按钮没有浮动，并且IE浏览器具有调心非浮动&浮动

试试这个演示麻烦：

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 
}

来源

2012-08-12 17:58:34 Mark

这在IE 7中完美工作，所以谢谢。将在IE 6中测试。 – 2012-08-12 18:33:36

Internet Explorer不显示相对定位和正确浮动的按钮

回答

相关问题