在 webkit 浏览器中换行的模态标签元素

Question

我目前在 Webkit 浏览器（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

哇。 Div-soup 以绝对度量定义的所有内容。我不知道从哪里开始。我知道，我将从这里开始：每个输入只能有一个标签，所以......让我们试试这个：

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.

少即是多。