为什么文本颜色溢出到 mozilla 中的单元格边框？

Question

我用 table 和 javascript 制作了一个简单的 html 来格式化它。但是这些行为在 firefox 中是出乎意料的，并且在 chrome 中有效。文字颜色溢出到单元格边框

HTML代码：

在此 html 代码中。我添加了包含 6 行和 1 header.

的 table 标签

<!DOCTYPE html>
<html>
<head>
    <link
    rel="stylesheet"
    href="test.css" />
</head>

<body bgcolor="#0b1b2a">
    
    
        <center><table id="table1" border='1' style="width: 100%;text-align: center;">
            <tr>
                <th>x</th>
                <th>y</th>
            </tr>
            <tbody id="tableContent">
                <tr>
                    <td>sample</td>
                    <td>not a sample</td>
                </tr>
                <tr>
                    <td>sample</td>
                    <td>not a sample</td>
                </tr>
                <tr>
                    <td>sample</td>
                    <td>not a sample</td>
                </tr>
                <tr>
                    <td>sample</td>
                    <td>not a sample</td>
                </tr>
                <tr>
                    <td>sample</td>
                    <td>not a sample</td>
                </tr>
                <tr>
                    <td>sample</td>
                    <td>not a sample</td>
                </tr>
            </tbody>
        </table></center>


</body>



<script src="test.js" type="text/javascript"></script>


</html>

CSS代码：

在这段 css 代码中，我向 table 和页面添加了一些样式。我还添加了深色背景来描述这个问题。

body{
    background-color: #0b1b2a;
}
#table1{
    color: #FFF;
    width: 90%;
    border: solid 2px;
    border-color: #aaa !important;
    border-collapse: collapse ;
    font-weight: 700;
}
tr{
    text-align: center;
    
}
tr:nth-child(even){
    background-color: #10273c;
    
}
tr:nth-child(odd){
    background-color: #0b1b2a;
    
}
canvas{
    width: 90% !important;
    height: 400px !important;
    
}

JS代码：

在这个 Java 脚本代码中，我得到了所有的 td 标签并比较了它们的值。如果文本等于“sample”，它将是红色的，否则它将是黄色的。

list_td = document.getElementsByTagName("td");
// Getting all td tags

for(elems in list_td){

    // Comparing the inner values and setting text color
    
    if(list_td[elems].innerHTML == "sample"){
        list_td[elems].style.color = "#f00"
    }
    else{
        list_td[elems].style.color = "#ff0"
    }
}

Firefox 中的输出：

chrome 中的输出：

Firefox 版本：82.0 Chrome版本：86.0.4240.183

Answer 1

试试这个

tr,td{
  border-color: white;
}

为什么文本颜色溢出到 mozilla 中的单元格边框？

Why text color overflows to cell border in mozilla?

html

javascript

css

firefox

google-chrome