0

表を含む Web ページを作成しています。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);
    }




問題がどこにあるのか誰にもわかりますか？どこで間違いを犯したか教えていただければ幸いです。

ありがとう！

4

1 に答える 1

0

コードを確認しています。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" />

3 番目: ID は一意である必要があります。ID を持つ複数の要素があります。(cellCheckBox, itemName) それらをクラスに変更し、それに応じて CSS を変更することをお勧めします。

それを確認して報告します。問題が解決しない場合は、さらに調査します。

于 2013-09-12T11:47:31.563 に答える