边界半径Firefox不起作用答案

【问题标题】：border-radius firefox not working边界半径Firefox不起作用
【发布时间】：2015-11-30 02:39:50
【问题描述】：

我正在尝试让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/

感谢您的宝贵时间。

【问题讨论】：

我刚刚意识到我有两次 css，忽略它。修复后还是不行。

标签： html css firefox

【解决方案1】：

在我看来，border-radius 似乎不适用于 <table>：尝试将 display:block; 添加到 table.tableCenter{ } 并得到圆形边框。

建议：

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

我会选择第一个选项，因为看起来您只是将表格用于布局，这无论如何都是不好的标记；-)

【讨论】：

我同意你的看法。我得到了一个 div 边界半径，可以在 Firefox 中正常工作。

【解决方案2】：

我拿出了值得信赖的 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 命令也是如此。此外，有时在 CSS 不起作用时，在 STYLE 属性中执行这些操作会起作用。我知道——不应该那样做。我认为为什么会发生这种情况是您在 CSS 中的某处发生冲突，然后 STYLE 命令优先，因此它可以解决问题。真的不知道。

【讨论】：

这不是问题，不过谢谢。我没有包含文档类型 +1
HTML 3.2 - 你是认真的吗？ ;-)
嘿！他在用桌子！ VP 仍将创建适用于所有浏览器的网页。呵呵。我编写了一个程序来获取代码并将其转换为使用 CSS。我会跳槽到更新的编辑器（我有 Dreamweaver、WebPlus 和其他几个），但 VP 的简单性让我一直在使用它，而我的转换器完成了所有繁重的工作。我的转换程序以 MVC 格式布置所有内容，创建 CSS 文件，放入所有命令以使用 jQuery、标准 Javascript 函数等等。所以我做了一些标准的东西，剩下的就交给它了。 :-)

【解决方案3】：

嗯，我想你必须添加border: 1px solid #fff;

【讨论】：

这将为元素添加边框。提问者正在尝试创建边界半径。