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

【问题标题】：Why text color overflows to cell border in mozilla?为什么文本颜色溢出到Mozilla中的单元格边框？
【发布时间】：2021-02-21 15:48:35
【问题描述】：

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

HTML 代码：

在这个 html 代码中。我添加了 6 行和 1 个标题的表格标签。

<!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 代码中，我为表格和页面添加了一些样式。我还添加了深色背景来描述这个问题。

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 输出：

火狐版本：82.0 Chrome 版本：86.0.4240.183

【问题讨论】：

标签： javascript html css google-chrome firefox

【解决方案1】：

试试这个

tr,td{
  border-color: white;
}

【讨论】：