Question

我正在编写一个包含表格的网页，当使用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);
    }

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

谢谢！

Answer 1

我正在检查你的密码。而我眼中的第一件事就是你用body封住了form。它应该是另一种方式。

更改此内容：

<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的元素。（cellCheckBox，itemName）我建议你把它们改成课堂，并相应地改变你的CSS。

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

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

1 个答案: