웹킷 브라우저에서 개행 문자로 래핑하는 모달 레이블 요소

Question

현재 웹킷 브라우저 (Chrome 4.0.249.89 & 사파리 4.0.4)의 CSS 스타일에 문제가 있습니다. 여기에는 라벨 목록이있는 모달 창이 있습니다. 라디오 버튼 및 각 라디오 버튼이하는 것을 설명하는 텍스트가 추가되었습니다. 제대로 여기

FF 3.5.7에서 모달 표시, 모달 내부의 HTML의

<div id="rta_top"> 
     <img src="pb_close_off.png" width="17" height="15" alt="Close this window" title="Close this window" id="rta_close" /> 
     <h2 class="rta">Report</h2> 
    </div> 
    <div id="pb_bottom"> 
      <div id="error_holder"> 
       <div id="error"></div> 
      </div> 
     <br /> 
     Please choose a reason for reporting this ad: 

     <form action="submit.php" method="post" id="report_form"> 
      <fieldset> 
       <br /> 
       <label for="incorrect_address">Wrong Address:</label> 
        <div class="report_ad_radio"> 
         <input type="radio" id="incorrect_address" name="description" value="1" /> 
        </div>     
        <div class="report_ad_text"> 
         <label for="incorrect_address"> &nbsp; (Ad has wrong address).</label> 
        </div> 
       <br /> 

       <label for="duplicate">Duplicate:</label> 
       <div class="report_ad_radio"> 
        <input type="radio" id="duplicate" name="description" value="2" /> 
       </div> 

       <div class="report_ad_text"> 
        <label for="duplicate"> &nbsp; (Identical to another ad on-site).</label> 
       </div> 
       <br /> 

       <label for="mis_classified">Mis-Classified:</label> 
       <div class="report_ad_radio"> 
        <input type="radio" id="mis_classified" name="description" value="3" /> 
       </div> 
       <div class="report_ad_text"> 
        <label for="mis_classified">&nbsp; (Ad is in the wrong section).</label> 
       </div> 
       <br /> 

       <label for="inaccurate">Inaccurate:</label> 
       <div class="report_ad_radio"> 
        <input type="radio" id="inaccurate" name="description" value="4" /> 
       </div> 
       <div class="report_ad_text"> 
        <label for="inaccurate">&nbsp; (No longer available/price changed).</label> 
       </div> 
       <br /> 

       <label for="photos">Photo Issue:</label> 
       <div class="report_ad_radio"> 
        <input type="radio" id="photos" name="description" value="5" /> 
       </div> 
       <div class="report_ad_text"> 
        <label for="photos">&nbsp; (Photos are inappropriate or do not belong to this ad).</label> 
       </div> 
       <br /> 

       <label for="spam">Spam:</label> 
       <div class="report_ad_radio"> 
        <input type="radio" id="spam" name="description" value="6" /> 
       </div> 
       <div class="report_ad_text"> 
        <label for="spam">&nbsp; (Ad is spam/scam and is not exclusive).</label> 
       </div> 
       <br /> 

       <label for="other">Other:</label> 
       <div class="report_ad_radio"> 
        <input type="radio" id="other" name="description" value="7" /> 
       </div> 
       <div class="report_ad_text"> 
        <label for="other">&nbsp; (Other reason, please specify).</label> 
       </div> 
       <br /> 
       <br /> 

       <label for="more_info">More Info:</label> 
        <textarea id="information" name="information"></textarea> 
       <br /> 
       <br /> 

      <div id="sending"> 
        <div id="loader"></div> 
        <input type="hidden" name="submit_report_ad" value="1" /> 
        <input type="image" src="/i/button_send_off.png" id="reply_button" name="submit_reply" value="Send &raquo;" /> 
      </div> 
     </fieldset> 
    </div> 
</div> 

각 요소에 대한 CSS는 : 사파리에서

#rta_background { 
    padding: 10px; 
    background: url(/i/bg_modal_ra.png) no-repeat; 
} 

#ra_background_sent{ 
    padding: 10px; 
    background: url(/i/bg_modal_ra_sent.png) no-repeat; 
} 

#rta_top { 
    padding: 0 8px 0 18px; 
    background: #355eae url(/i/bg_linkbar_off.png) repeat-x; 
    height: 30px; 
    line-height: 30px; 
} 

#rta_top h2 { 
    overflow: hidden; 
    width: 495px; 
    height: 30px; 
    font-size: 14px; 
    color: #fff; 
} 

#rta_close { 
    margin: 7px 0 0; 
    float: right; 
} 

#rta #pb_bottom fieldset { 
    background: #dff; 
} 

.report_ad_radio { 
    padding: 5px 0 0 5px; 
    float: left; 
} 

#rta #pb_bottom .rta_warning { 
    margin: 0 auto 6px; 
    border: 1px solid #f00; 
    padding: 2px 0; 
    width: 80%; 
    height: 15px; 
    line-height: 15px; 
    font-size: 12px; 
    font-weight: bold; 
    color: #000; 
    text-align: center; 
    background: #fdd; 
} 

#rta #pb_bottom .report_ad_text { 
    white-space: nowrap; 
} 

#rta #pb_bottom .report_ad_text label { 
    margin: 0; 
    padding: 10px 0 0 0; 
    width: auto; 
    font-size: 12px; 
    font-weight: normal; 
    cursor: pointer; 
    background: #00f000; 
} 

#information { 
    margin: 5px 0 0 5px; 
    padding: 2px 2px 2px 2px; 
    width: 370px; 
    height: 76px; 
    border: 1px solid #ccc; 
    color: #888; 
    line-height: 1.4; 
    resize: none; 
} 

#sending { 
    float:right; 
    margin-right: 24px; 
} 

#pb_bottom #error { 
    margin: 0 20px 0 50px; 
    height: 20px; 
    width: 420px; 
} 

#loader { 
    margin-right: 20px; 
    margin-top: 6px; 
    float:left; 
} 

가 보인다 이렇게 :

Safari http://neilcremins.com/img_dump/modal-saf.png

파이어 폭스에서 그것은 다음과 같습니다

Firefox http://neilcremins.com/img_dump/modal-ff.png

Answer 1

와우. 모든 수단이 절대적인 척도로 정의 된 Div- 수프. 어디서부터 시작해야할지 모르겠다. 만 입력 당 하나 개의 레이블을 가질 수 있습니다, 그래서 ...의이를 해보자 : 나도 알아, 내가 여기 시작합니다

HTML :

<label><span class="intro">Wrong address</span><input type="radio" id="wrongaddress"/>(Ad has wrong address)</label> 

CSS :

label{display: block} 
    .intro{width: 12em; float: left; font-weight: bold} 

Demo.

덜 있습니다.