在IE中選擇框不符合

選擇框沒問題，我真的不想問這個問題，因爲它應該是一個相當簡單的解決方案，但我花了數小時試圖解決它無濟於事。我有一個帶有文本框的網頁，然後是一個選擇下拉列表。在Firefox和Chrome瀏覽器中，它們並排排列，但在IE中，選擇框的位置高於文本框。 Theres沒有應用於此選擇框或文本框的CSS。在IE中選擇框不符合

Image http://i44.tinypic.com/2zscsvq.png

這是一個aspx頁面，這種情況的產生HTML源代碼是：

<label for="ctl00_main_primaryEmail" id="ctl00_main_primaryEmailLabel">Primary Email: </label> 
<input name="ctl00$main$primaryEmail" type="text" id="ctl00_main_primaryEmail" /> 
<select name="ctl00$main$acceptedDomainsDropDownList" id="ctl00_main_acceptedDomainsDropDownList"> 
      <option value="domain.com">domain.com</option> 
      <option value="doamin1.com">domain1.com</option> 
      <option value="domain2.com">domain2.com</option> 
      <option value="domain3.com">domain3.com</option> 
     </select>

來源

2009-04-08 Sam Cogan

你可以發佈這些元素的源代碼嗎？ – Daan 2009-04-08 09:16:16

也是哪個版本的IE？ – 2009-04-08 09:17:50

其IE 6,7和8 – 2009-04-08 09:19:34

原來這個問題是CSS相關的。這是一個選擇元素的邊界設置，它隱藏在Blueprint Library的IE only樣式表的深處，因此不會出現在螢火蟲中。對於其他任何碰到它的人來說，它的這個CSS代表select元素

margin : 0.5em 0px

來源

2009-04-08 14:35:21

使用表格來佈局可能有助於

來源

2009-04-08 09:16:08

我曾嘗試下面的代碼。當在IE7中測試時，它完美地排列起來。

<input type="text"> 

<select> 
    <option>option1</option> 
    <option>option2</option> 
</select>

我的猜測是，從父元素（body，form，父類）一些CSS樣式被應用到一個或兩個元素，但沒有看到源代碼，這是很難判斷。

來源

2009-04-08 09:24:35 Daan

您是否使用任何CSS來重置所有標籤的邊距和填充？這是相當有用的東西，如啓動你的樣式表：

*,html { 
    margin: 0; 
    padding: 0; 
    }

這擺脫了很多渲染不一致的瀏覽器之間（即IE），並需要提供地方實際需要填充/利潤率額外的CSS往往是最小的。有了這個地方「復位」規則框在IE（6 & 7測試）排隊，雖然不同的默認字體大小的問題仍然存在：

alt text http://www.mikrogroove.com/stackoverflow/textbox_selectbox_alignment.gif

來源

2009-04-08 09:27:30

我建議把你的形式在一些周圍的標記。我通常使用定義列表，所以標記會像

<dl> 
    <dt> 
     <label for="ctl00_main_primaryEmail" id="ctl00_main_primaryEmailLabel">Primary Email: </label> 
    </dt> 
    <dd> 
     <input name="ctl00$main$primaryEmail" type="text" id="ctl00_main_primaryEmail" /> 
    </dd> 
    <dt style="display: none;"> 
     <label for="ctl00_main_acceptedDomainsDropDownList">Accepted Domains</label> 
    </dt> 
    <dd> 
     <select name="ctl00$main$acceptedDomainsDropDownList" id="ctl00_main_acceptedDomainsDropDownList"> 
      <option value="exchange.samcogan.com">exchange.samcogan.com</option> 
      <option value="doamin1.com">domain1.com</option> 
      <option value="domain2.com">domain2.com</option> 
      <option value="domain3.com">domain3.com</option> 
     </select> 
    </dt> 
</dl>

然後你就可以漂浮/位置DT和DD元素出現在一個水平行。

這種方法，無論您使用dl，ul還是其他，都可以提供更好的定位。

來源

2009-04-08 09:29:04

在IE中選擇框不符合

回答

相關問題