Question

如果您在我的网站上查看：http://mcderp.x10.mx/members.php，当您将鼠标悬停在底行时，您可以看到该行没有圆角，我尝试将'overflow：hidden'应用于表格有圆角的类，但这不起作用！：（

Answer 1

你必须设计单个细胞的样式。 Firefox和Chrome上的工作示例：http://jsfiddle.net/AyKE7/

CSS

table {
    border-collapse: collapse;
}
th,
td {
    padding: 4px 7px;
}
/* hover */
tr:hover th,
tr:hover td {
    background-color: lightblue;
}
/* hover, left cell */
tr:hover th {
    border-radius: 5px 0 0 5px;
}
/* hover, last cell on he right */
tr:hover td:last-child {
    border-radius: 0 5px 5px 0;
}

Answer 2

查看检查器，您只声明了一个版本，需要添加供应商前缀。它在chrome中运行良好

.myClass
{
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
}

Answer 3

请尝试此示例 - 这将有助于解决CSS问题。这个CSS可以在Firefox，Safari / Chrome，Opera甚至IE9浏览器中使用。

.bottomRow {
    -moz-border-radius-bottomright: 50px; border-bottom-right-radius: 50px;
    -moz-border-radius-bottomleft: 50px; border-bottom-left-radius: 50px;
}

表行border-radius不起作用 - 替代？

3 个答案: