2

ここで自分を狂わせる！

まず、境界線の半径の前に-moz-を付ける必要がなくなったことを明確にできますか。しかし、古いブラウザが使用されている場合に備えて、そうすることをお勧めしますか？

次に、テーブル内で境界線の半径を使用する場合、境界線の折りたたみが折りたたまれないようにする必要があることを受け入れます。また、境界線の間隔を0にしないでください。

次のドラフトCSS＆HTMLは、mozillaを除くすべてのブラウザで、適切に丸められたテーブル要素を作成します。mozillaでは、何らかの理由でテーブルが丸められますが、tdはすべて正方形です。

火災バグは、半径が適用されていることを報告します。実際、tdに背景色を配置すると、この背景が丸みを帯びていることがわかります。ただし、残りは正方形として表示されます。

何かご意見は ？？？

/* borders */

#booking_Form_Wrapper{
    border: 0px;
    padding: 0px;
    margin: 0px;
}

#booking_Table{
    width: 300px;
    height: 400px;
    background-color: #a5a5a5;
    border-radius: 14px;
    border-spacing: 6px 6px;
}

#booking_Table th{
    border-radius: 10px;
}

#booking_Table td{
    border-radius: 10px;
}

/* other styles */

HTML

<table id="booking_Table"> 
    <thead id="booking_Title">
        <th>
            Booking
        </th>
    </thead>
    <tbody>
        <tr id="booking_Session">
            <td>
                <a>Class - Level</a><br />
                <a>Day and Date</a><br />
                <a>Start Time - End Time</a>
            </td>                   
        </tr>
        <tr id="booking_XXXXXXX">
            <td style="border-radius: 6px;">
                <label>Do you want to XXXXXXXX</label><input type="checkbox"/>
                <label>XXX</label><input type="radio" name="XXX" value="b">
                <label>XXX</label><input type="radio" name="XXX" value="s">
                <label>XXX</label><input type="radio" name="XXX" value="r">
            </td>           
        </tr>
        <tr id="booking_Cancel">
            <td>                
            <P><span>Cancellation Policy</span> - xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</P>
            </td>
        </tr>
        <tr class="form_Footer">
            <td>
                <input class="form_Submit" type="submit" name="submit" value="Make Booking"/>
                <input class="form_Cancel" type="cancel" name="cancel" value="Cancel"/>
            </td>
        </tr> <!-- form footer -->
    </tbody>
</table> <!-- booking table -->

ここに画像の説明を入力してください

これが最初の正方形tdのfirebug計算スタイル情報です

ここに画像の説明を入力してください

4

1 に答える 1

1

私は解決策を見つけました-私はこれを正しい技術用語で述べていないかもしれませんが、効果は含有要素に高さを与えることによってFFで引き起こされました。私の場合<tr>。興味深いのは、他のどのブラウザもこれについて文句を言わず、<td>関係なく丸めることです。これは、境界線が指定されているかどうかに関係なく、半径が適用される要素の背景に半径が適用されるというMozilla開発者のメモに関連していると思います。は背景の<tr>一部ではなかったため、丸められませんでした。

とにかく、コンテナに高さを与えないでください。

于 2012-09-02T19:39:44.303 に答える