Question

使用JS设置TD的背景颜色很好。但是，在FF 3.0.18中设置边框颜色是有问题的，尽管IE 6没有遇到这种情况。 FF存在问题，因为它要求TD元素将属性 style 初始化为 border-style：solid 。没有它，设置TD的边框颜色将不起作用。这是已知的错误吗？

如何设置边框颜色而不必设置 style 属性以及初始化值？

我知道设置类属性的另一个技巧，而不是直接设置边框颜色。这是否表明TD不喜欢动态设置边框颜色？这也是众所周知的吗？

有问题的代码如下（目标是找出为什么设置简单事实1 的边框颜色不起作用，而简单事实3 在我使用技巧时起作用如上所述）：

<html>
<head>
<title>Quirks FF 3.0.18</title>
<style type="text/css">
table {
    border-collapse: collapse;
}
</style>
<script type="text/javascript">
function changeBgColor()
{
    document.getElementById('simple').style.backgroundColor='yellow';
    document.getElementById('simple2').style.backgroundColor='yellow';
    document.getElementById('simple3').style.backgroundColor='yellow';
}

function quirk(id)
{
    var x = document.getElementById(id);

    x.style.border = '2px solid red';
}
</script>
</head>
<body>
    <input type="button" onclick="changeBgColor()" value="Change background color"/>
    <input type="button" onclick="quirk('simple')" value="Change border color 1"/>
    <input type="button" onclick="quirk('simple2')" value="Change border color 2"/>
    <input type="button" onclick="quirk('simple3')" value="Change border color 3"/>
    <table>
    <tr><td id="simple">Simple truth 1</td></tr>
    </table>
    <table>
    <tr><td><span id="simple2">Simple truth 2</span></td></tr>
    <table>
    <tr><td id="simple3" style="border-style: solid">Simple truth 3</td></tr>
    </table>
</body>
</html>

Answer 1

我相信这是一个错误。正如您已经指出的那样，解决方法是将border-style设置为solid。您可以将其添加到样式表中，以便始终初始化TD：

TD {border-style：solid; }

Answer 2

这不是一个错误，每个体面的浏览器都会要求你设置边框的所有三个值 - 颜色，样式（实线，虚线等）和像素宽度。如果缺少一个或多个属性，则结果可能会有所不同。

您需要在JS中设置所有三个属性才能正确显示边框。但是，不需要初始化（CSS）值。

此外，您始终可以通过border-width，border-style，border-color分别设置border属性： http://www.comptechdoc.org/independent/web/cgi/javamanual/javastyle.html

无法更改TD的borderColor

2 个答案: