模式標籤元素在webkit瀏覽器中換行換行

Question

我目前在Webkit browswers（Chrome 4.0.249.89 & safari 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它看起來像這樣：

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

在Firefox中，它看起來是這樣的：

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

Answer 1

哇。在絕對措施中定義一切的湯湯。我不知道從哪裏開始。我知道，我會從這裏開始：你只能有每輸入一個標籤，所以......讓我們試試這個：

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。

少即是多。