2

把自己逼疯了！

首先，我可以澄清一下，不再需要为边界半径添加前缀，例如使用 -moz-。但是，如果使用旧浏览器，这样做是一种好习惯吗？

其次，我接受在表格内使用边界半径时要求边界折叠不折叠，我也认为边界间距不应该为 0。

下面的 CSS 和 HTML 草案在所有浏览器中创建了很好的圆角表格元素，除了 mozilla，由于某种原因，表格是圆形的，th 是圆形的，但 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 的萤火虫计算的样式信息

在此处输入图像描述

4

1 回答 1

1

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

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

于 2012-09-02T19:39:44.303 回答