필드 세트 레이아웃이 일치하지 않습니다.

라디오 버튼 그룹의 레이블로 필드 세트 범례를 사용하려고합니다. HTML과 CSS는 IE8 & 9, firefox, chrome에서 잘 작동합니다. IE7에서는 라디오 버튼 위에 라벨이 나타납니다. 다른 모든 브라우저에서는 레이블이 버튼 왼쪽에 나타납니다. IE7에 조건부 stle을 추가하게되어 기쁩니다.하지만이 작업을 수행 할 수있는 부분을 파악할 수는 없습니다.필드 세트 레이아웃이 일치하지 않습니다.

문제는 다음과 같은 마크 업에 복제

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 

    <html> 
    <head> 
    <title>Untitled</title> 
    <style type="text/css"> 
    .radiolegend { 
     display: inline; float: left; width: 300px; 
    } 
    .fieldsetstyle { 
     border: 0 none; clear: left; float: left; 
     } 

    </style> 

    </head> 
    <body> 
    <form> 
    <fieldset class="fieldsetstyle"> 
    <legend class="radiolegend">legend</legend> 
    <input type="radio" name="r1" style="display: inline;" id="r1"> 
    <label for="r1">r1</label> 
    <input type="radio" name="r2" style="display: inline;" id="r2"> 
    <label for="r2">r2</label> 
    </fieldset> 
    </form> 
    </body> 
    </html>

출처

2011-11-16 Andrew Bucknell

조건부 IE7하려면, 다음이 수행

CSS

.radiolegend { 
    float: left; width: 150px; 
} 
.fieldsetstyle { 
border: 0 none; clear: left; float: left; width:300px; 
} 

.cb{ 
float:right; 
    margin-top:-20px; 
}

HTML

<form> 
<fieldset class="fieldsetstyle"> 
<legend class="radiolegend">legend</legend> 
    <div class="cb"><input type="radio" name="r1" style="display: inline;"/>r1</div> 
    <div class="cb"> <input type="radio" name="r2" style="display: inline;"/>r2 </div> 
    </fieldset></form>

지금을 , y o 나머지 브라우저에서도 스타일을 변경해야합니다. margin-top:-20px;을 .cb에서 삭제하면됩니다. <input> 태그에 텍스트를 배치했으나 올바르지 않습니다. <input>은 자동으로 닫아야합니다.

출처

2011-11-16 14:48:56

감사합니다. bobek. 그것은 ie7에서와 같이 항상 라디오 버튼에 음수 여백을 사용하여 범례 다음에 줄 바꿈을 넣는 것처럼 보입니다. –

필드 세트 레이아웃이 일치하지 않습니다.

답변

관련 문제