浮動：在IE7下降到一個新的線

我一直卡在浮動問題一會兒，所以我希望社會能夠再次幫助我。我有一個新的網絡表格here。像往常一樣，除了IE7（或兼容性IE8）外，其他方面都看起來不錯。浮動：在IE7下降到一個新的線

出於某種原因，某些容器以窗體文本下方的新行上的表單域結束。 CSS不是我的強項，否則我肯定能夠解決這個問題。誰能告訴我我在這裏失蹤了什麼？

我試着將float：left添加到表單文本中，但最終導致了其他一些混亂。

來源

2011-01-25 CoreyT

儘量小的變化標記：將項目與項目之前的浮動沒有它（在同一行）。它應該有所幫助。

來源

2011-01-25 19:12:00 oryol

偉大的提示！ie的樂趣。 – orourkedd

今天這幫了我一個簡單的修復。謝謝！ –

它在語義上不正確。是嗎？ – ciembor

您可以嘗試使文本的span標籤具有固定寬度，將它們左移，然後對要輸入的輸入字段進行相應操作。我還建議在表單上使用標籤標籤而不是span標籤。沒有真正堅實的理由，它只是一個標籤的意思，正是你的span標籤所做的。

來源

2011-01-25 19:09:12 Brian

你想要做的是添加一個明確的：都作爲你的浮動元素的最後一個兄弟。

因此，像：

<div style="float:left;"> 
    <!-- children of div here --> 
</div> 
<div style="clear:both;"> 
    <!-- leave empty --> 
</div>

來源

2011-01-25 19:09:32 Dave

如果你將你的.formText左邊浮動，將你的span.required左邊浮動，然後將你的輸入浮動到左邊，你應該能夠將它們排列在同一條線上。

我會修改你的標記了一下。您<span class="formText">真的應該是一個<label>

例如：

<P class=formRow> 
<label for="FirstName">First Name<SPAN style="FLOAT: left" class=required>*</SPAN></label> 
<INPUT id=FirstName class=formTextbox name=FirstName> 
</P>

和你的CSS是這樣的：

.formRow { 
    clear: both; 
} 
    .formRow label { 
    float: left; 
    width: 150px; 
    } 
    .formRow input { 
    float: left; 
    }

來源

2011-01-25 19:27:55 Jeff

我知道它已經因爲這被張貼了很長時間，但我找到了我喜歡的解決方案。要點是在你的CSS中爲'IE'使用'表達'標籤，以便將浮動元素移動到DOM中父元素的第一個元素。它對於所有其他瀏覽器在語義上都是正確的，但對於IE7，我們修改DOM以移動浮動元素。

在我的情況，我有：

<div> 
    <h1></h1>...<p>any other content...</p> 
    <small class="pull-right"></small> 
</div>

在我的CSS的拉吧，我用：

.pull-right { 
    float:right; 
    *zoom: ~"expression(this.runtimeStyle.zoom='1',parentNode.insertBefore(this,parentNode.firstChild))"; 
}

其結果是，IE7移動我的<small>是第一要素<div>但所有其他瀏覽器都只有標記。

這可能不適用於所有人。從技術上講，它正在修改標記，但僅限於IE7的DOM，它也是一個JavaScript解決方案。

另外，我知道可能會有一些性能問題與表達式（它很慢），所以也許這是不理想的，有很多這樣的花車。就我而言，它運行良好，並允許我保持語義上正確的HTML。

來源

2013-07-12 18:02:55

浮動：在IE7下降到一個新的線

回答

相關問題