Question

在这里开车疯了！

首先，我可以澄清一下，不再需要使用-moz-作为边界半径的前缀。但是，如果使用旧的浏览器，这样做是否是好的做法？

其次我接受在表格中使用边界半径要求边界崩溃不崩溃我还认为边界间距不应该是0。

以下草案CSS＆amp;除了mozilla之外，HTML在所有浏览器中都创建了非常圆润的表格元素，由于某种原因，表格被舍入，而圆形是圆形但是td都是方形的。

Fire bug报告已应用半径。事实上，如果我在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 -->

enter image description here

这是第一个方格td

的firebug计算样式信息

enter image description here

Answer 1

我找到了解决方案 - 我可能没有用正确的技术术语说明这一点，但是通过给予包含元素一个高度，效果是在FF中引起的。就我而言<tr>。有趣的是，其他浏览器都没有抱怨这个问题而且无论如何绕过<td>。我认为这与mozilla开发人员笔记有关，他们说半径应用于应用半径的元素的背景，无论是否指定了边框。 <tr>不是背景的一部分，因此没有四舍五入。

无论如何不要给容器一个高度和一切都好。

表中的Mozilla border-radius不能始终如一地工作

1 个答案: