这个浮动是如何影响我的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;
}

出于某种原因，我无法理解，border属性没有生效。我随机添加了

float: left;

到课堂上，现在它起作用了。。。

它有效，所以我很高兴，但我不知道为什么。我不能轻易地重新创建这个问题，我的DOM中一定有一些类对我的td有影响。但我只是不知道float会如何影响元素的边界半径。

我不知道这些与属性有任何联系。

Answer 1

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

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