IE7 문제의 긴 라벨 라디오 버튼

긴 라벨이있는 라디오 버튼이 Firefox와 IE8에는 올바르게 표시되지만 IE7과 IE6에는 올바르게 표시되지 않습니다.IE7 문제의 긴 라벨 라디오 버튼

기본적으로, 나는 다음과 같다 원하는 (O 라디오 버튼입니다) :

내가/우리가이 지정 계좌에서 내 베스텍 계좌에서 인출 및 직접 직불 결제 승인이
I/우리는 내가/우리가 내 계정 만이 지정 계좌 에서 직불 결제를 승인 만 내 계정에서이 지정 계좌
에 인출 권한을 부여

내 CSS는 :

IE7과 IE6에서

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

, 다음 줄은 없습니다 이것은 나를 위해 작동 라벨

출처

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을 편집 할 자유가 있다고 가정합니다.

기본적으로 레이블에 왼쪽 패딩을 추가하고 위치 : relative를 사용하여 자식이 위치를 상속 받도록 설정 한 다음 라디오 버튼의 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 : 사람들이 물건을 downvote하려는 경우

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

, 그들은 적어도 이유를 말할 수 있습니다.

출처

2010-07-01 14:01:41

당신도이 답변에 만족하지 못하는 것 같지만 누군가가 하향 투표를하면 화가납니다. – reisio

레이블 폭을 늘리면됩니다. 어쩌면 인라인 태그를 사용할 수 있습니다.

<label style="width:420">

또는 레이블의 CSS 속성에 추가 할 수 있습니다.

출처

2011-12-02 10:38:18 Ams

IE7 문제의 긴 라벨 라디오 버튼

답변

관련 문제