在 IE8 中，td 边框隐藏在 tr 背景颜色后面答案

【问题标题】：td borders were hidden behind tr background color in IE8在 IE8 中，td 边框隐藏在 tr 背景颜色后面
【发布时间】：2013-09-12 08:59:41
【问题描述】：

我正在编写一个包含表格的网页，当使用 IE8 以外的任何浏览器查看时，每个单元格都有一个白色边框；但在 IE8 中查看时，边框隐藏在行的背景颜色后面。

（即使IE9显示白边也没有问题，而且我没有早期的IE版本可以尝试。）

知道为什么吗？

HTML如下：

<html>
    <head></head>
    <form>
    <body>
        <div id="selectFullTextTableDiv">
        <table>
          <tr id="oddRow">
            <td id="cellCheckBox"><input name="pid[]" type="checkbox" value="itemOne"></td>
            <td id="itemName">item 1</td>
          </tr>
          <tr id="evenRow">
            <td id="cellCheckBox"><input name="pid[]" type="checkbox" value="itemTwo"></td>
            <td id="itemName">item 2</td>   
          </tr>
        </table>
        </div>
    </body>
    </form>
</html>

CSS如下：

#selectFullTextTableDiv {   position:relative;
    top:0px;
    left:0px;
    }

#selectFullTextTable {  width: 650px;
    float:left;
    position:relative;
    top:0px;
    left:0px;
    margin: 30px 0 0 10px;
    font-family:Arial, Helvetica, sans-serif;
    font-size:14px;
    border-spacing:0px;
    border-collapse:separate;
    }

#selectFullTextTable tr {   position:relative;
       top:0px;
       left:0px;
       }


#selectFullTextTable td {   position:relative;
    top:0px;
    left:0px;
    height:auto;
    vertical-align:middle;
    padding: 10px 5px 10px 5px;
    border-bottom: 2px #FFFFFF solid;
    border-top: 2px #FFFFFF solid;
    }

#oddRow {   background-color:#CCCCCC;
         }

#evenRow {  background-color:#FFCC33;
          }

#cellCheckBox { text-align:center;
    position:relative;
    top:0px;
    left:0px;
    -webkit-border-radius:6px 0px 0px 6px;
    -moz-border-radius:6px 0px 0px 6px;
    border-radius: 6px 0px 0px 6px;
    behavior: url(/CSS3PIE/PIE.htc);
    }

#itemName { margin:2px;
    position:relative;
    top:0px;
    left:0px;
    text-align:left; 
    display:table-cell;
    -webkit-border-radius:0px 6px 6px 0px;
    -moz-border-radius:0px 6px 6px 0px;
    border-radius: 0px 6px 6px 0px;
    behavior: url(/CSS3PIE/PIE.htc);
    }

有没有人看到问题可能出在哪里？如果您能告诉我我在哪里犯了错误，将不胜感激。

谢谢！

【问题讨论】：

你能设置一个 jsfiddle 来复制这个吗？

标签： css internet-explorer border background-color css-tables

【解决方案1】：

我正在检查您的代码。我首先想到的是你用form包围了你的body。应该是相反的。

改变这个：

<html>
    <head></head>
    <form>
    <body>
    ..
    </body>
    </form>
</html>

至此：

<html>
    <head></head>
    <body>
         <form>
         ..
         </form>
    </body>
</html>

其次：关闭你的input标签。

改变这个：

<input name="pid[]" type="checkbox" value="itemOne">
<input name="pid[]" type="checkbox" value="itemTwo">

至此：

<input name="pid[]" type="checkbox" value="itemOne" />
<input name="pid[]" type="checkbox" value="itemTwo" />

第三： ID 应该是唯一的。您有多个带有 ID 的元素。（单元格复选框，项目名称）我建议您将它们更改为类，并相应地更改您的 CSS。

检查并报告。如果问题仍然存在，我会进一步调查。

【讨论】：