这个浮动如何影响我的td的边界半径？

Question

我有一个td，当我将鼠标悬停在它上面时会添加一个悬停类：

.hover{
    border: 1px solid #364861;
    background: #5979a0 url(img.png) 50% 50% repeat-x;
    font-weight: bold;
    color: #ffffff;
    border-radius: 10px;
}

由于某些原因我无法弄清楚，边界属性没有生效。我随机添加了

float: left;

上课，现在有效......

它有效，所以我很高兴，但我不知道为什么。 我无法在小提琴中重新创建问题，我的DOM中必定有一些类对我的td产生影响。但我不知道浮点会如何影响元素的边界半径。

我不知道这些属性是以任何方式链接的。

Answer 1

这是因为td不能有border-radius。当你给它一个float时，它会突破它的表结构并成为一个具有它自己结构的独立元素，所以你会看到border-radius。

我没有看到带圆角的表格单元格的用例。所以听起来你是在滥用table / td标签。如果它不是表数据，请不要将其放在table结构中。只需使用带圆角的div。