Question

一切都在Internet Explorer和Chrome中正常运行。但在Firefox中根本没有圆角。有没有人知道问题可能是什么？我试图删除-moz-和-webkit-标签，但它没有任何区别。最新版本的Firefox，Chrome和Internet Explorer应支持Border-radius。

任何解决方案？

代码：

.evenOddColoursLight tr:not(.noEvenOddColoursLight), .evenOddColour1L{
background-color:#f6f6f4;
}
.evenOddColoursLight tr:nth-child(odd):not(.noEvenOddColoursLight), .evenOddColour2L{
background-color:#efeeeb;
}

.forum-table th:first-child {
-moz-border-radius: 10px 0 0 0;
-webkit-border-radius: 10px 0 0 0;
border-radius: 10px 0 0 0;
}

.forum-table th:last-child {
-moz-border-radius: 0 10px 0 0;
-webkit-border-radius: 0 10px 0 0;
border-radius: 0 10px 0 0;

}

.forum-table tr:last-child td:first-child {
-moz-border-radius: 0 0 0 10px;
-webkit-border-radius: 0 0 0 10px;
        border-radius: 0 0 0 10px;
}

.forum-table tr:last-child td:last-child {
-moz-border-radius: 0 0 10px 0;
-webkit-border-radius: 0 0 10px 0;
        border-radius: 0 0 10px 0;

}

.forum-table table tr:last-child td {
border-bottom: none;
}

.forum-table td {
padding:10px;
}

.forum-table th {
padding:5px 5px 5px 10px;
}

所有at位于代码：http://jsfiddle.net/SUhsD/

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 the right */
tr:hover td:last-child {
    border-radius: 0 5px 5px 0;
}

Answer 2

删除.evenOddColoursLight并添加：

解决了这个问题

.forum-table tr:nth-child(odd) td, .forum-table tr:nth-child(odd) th {
  background-color: #efeeeb;
}

.forum-table tr:nth-child(even) td, .forum-table tr:nth-child(even) th{
  background-color: #f6f6f4;
}

表的border-radius在Firefox中不起作用

2 个答案: