IE7問題中的長標籤單選按鈕

我有一個長標籤的單選按鈕，包裝到下一行，它在Firefox和IE8中正確顯示，但不在IE7和IE6中顯示。IE7問題中的長標籤單選按鈕

基本上，我想下面所示的情況（其中o是單選按鈕）：

我/我們授權從我Investec的帳戶提款和DIRECT DEBITS從這個指定賬戶
I /我們授權取款只能從我的戶頭上這個指定賬戶
我/我們授權直接扣款只能從這個指定賬戶到我的帳戶

個

我的CSS：

label { 
    float:none; 
    padding-left: 15px; 
    text-align:left; 
    width:420px; 
    display:block; 
    margin-left; 10px; 
}

在IE7和IE6，下一行是單選按鈕下，不根據標籤

來源

2010-07-01 user474079

-1

<!doctype html> 
<html> 
    <head> 
     <title></title> 
     <style> 
html { 
    font: 12px sans-serif; 
} 
form 
ul { 
    list-style: none; 
    margin: 0; 
    padding: 0; 
    width: 400px; 
} 
label { 
    cursor: pointer; 
} 
input { 
    float: left; 
} 
     </style> 
    </head> 
    <body> 
     <form action=""> 
      <ul> 
       <li> 
        <label><input type="radio" name="authorise"> I/we authorise WITHDRAWALS from my Investec account to and DIRECT DEBITS from this designated account</label> 
       </li> 
       <li> 
        <label><input type="radio" name="authorise"> I/we authorise WITHDRAWALS ONLY from my account to this designated account</label> 
       </li> 
       <li> 
        <label><input type="radio" name="authorise"> I/we authorise DIRECT DEBITS ONLY from this designated account to my account</label> 
       </li> 
      </ul> 
     </form> 
    </body> 
</html>

來源

2010-07-01 13:47:30 reisio

-1

的第一個單詞的第一個字母這對我的作品在IE8，IE7和FF中;我沒有在這裏測試IE6，但方法應該是合理的。我假設你有編輯HTML的自由。

基本上，左邊的填充添加到標籤，位置：相對，以便孩子從它繼承位置，然後使用單選按鈕上的position：absolute將其定位在該填充中。

HTML：

<label><input type="radio" />I/we authorise WITHDRAWALS from my Investec account to and DIRECT DEBITS from this designated account</label> 
    <label><input type="radio" />I/we authorise WITHDRAWALS ONLY from my account to this designated account</label> 
    <label><input type="radio" />I/we authorise DIRECT DEBITS ONLY from this designated account to my account</label>

CSS：

label { position:relative;top:0; padding-left:25px; text-align:left; width:420px; display:block; } 
label input { position:absolute; top:0;left:0; }

如果人們要downvote東西，他們至少可以說這是爲什麼。

來源

2010-07-01 14:01:41

看起來你甚至不滿意你的這個答案，但是當有人低估它的時候你會感到不安。 – reisio 2011-08-02 19:56:36

只需增加標籤的寬度即可。也許你可以使用內聯標籤，例如

<label style="width:420">

或者您可以將此添加爲標籤CSS的屬性。

來源

2011-12-02 10:38:18 Ams

IE7問題中的長標籤單選按鈕

回答

相關問題