Question

我试图让border-radius属性在Firefox中的表上运行。它在chrome中运行良好，我不关心IE 8及更低版本。

我的CSS：

table.tableCenter{
    padding: 0;
    width: 100%;
    -moz-border-radius: 15px;
    -moz-border-radius: 15px;
    -webkit-border-radius: 15px;
    -webkit-border-radius: 15px;
    border-radius: 15px;
    margin: auto;
    overflow: hidden;
    border-collapse: collapse; 
}

这也是展示这个问题的小提琴。 https://jsfiddle.net/1o6mzvff/

感谢您的时间。

Answer 1

我拿出了我可靠的Visual Page（一个非常古老的网页编辑器），我做到了这一点并且工作得很好：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN">
<HTML>
<HEAD>
    <META HTTP-EQUIV="Content-Type" CONTENT="text/html;CHARSET=iso-8859-1">
    <META NAME="GENERATOR" Content="Visual Page 2.0 for Windows">
    <TITLE>untitled</TITLE>
</HEAD>
<BODY>
<P>
<TABLE BORDER="0" WIDTH="100%" STYLE="border-radius : 15px; border : 1px solid black;">
    <TR>
        <TD WIDTH="33%">adfasdfsads</TD>
        <TD WIDTH="33%">asfsdfsadfasdfsaf</TD>
        <TD WIDTH="34%">safsadfsaf</TD>
    </TR>
    <TR>
        <TD WIDTH="33%">sdfsafsdfsadf</TD>
        <TD WIDTH="33%">sadfsadfsdfsaf</TD>
        <TD WIDTH="34%">sfdsafsdfds</TD>
    </TR>
    <TR>
        <TD WIDTH="33%">sadfsdfasfdas</TD>
        <TD WIDTH="33%">safsdfsadf</TD>
        <TD WIDTH="34%">safdsdfsdf</TD>
    </TR>
</TABLE>
</BODY>
</HTML>

你一开始有DOCTYPE吗？这有时会影响事情。对于HTTP-EQUIV Meta命令也是如此。此外，有时在STYLE属性中执行这些操作将在CSS不起作用时起作用。我知道 - 不应该这样做。我认为为什么会发生这种情况是你在CSS中的某个地方发生了冲突，然后STYLE命令先行，因此它解决了问题。真的不知道。

Answer 2

对我而言，看起来border-radius无效<table>：尝试将display:block;添加到table.tableCenter{ }，然后获得圆形边框。

建议：

摆脱桌子; - ）
或（未经测试）：使用<div>代替<table>，并使用display:table（加display:table-row和table-cell作为嵌套<tr> } / <td>需要成为<div>以及HTML有效性。）

我会选择第一个选项，因为看起来你只是使用表格进行布局，无论如何这都是糟糕的标记; - ）

Answer 3

是的，我认为你必须添加border: 1px solid #fff;

border-radius firefox无法正常工作

3 个答案: