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不顯示相對定位和正確浮動的按鈕

回答

相關問題