IEのテーブルセルがChrome/Firefoxと比較して移動しました

IEのテーブルに問題があります。面白いことに、これを行うことを選んだのはテーブルのほんの一部ですが、それほど少なくない理由は分かりません。本当に、それはレイアウトや何かを台無しにしているわけではありませんが、それでもなぜそれが実際にこれを行うのか知りたいのですが。あなたは私が何を意味するか見ることができるように、私は写真を添付しました：IEのテーブルセルがChrome/Firefoxと比較して移動しました

enter image description here

トップはクローム/ Firefoxので、下はIEです。私はテーブルを知っています、そして、それは異なったブラウザで異なっていますが、通常違いは数ピクセル程度です。私は見つけることができるすべてのリセットCSSメソッドを使用しているので、すべてのブラウザですべてが同じである必要があります。

テーブルはこのように形成されています

<table class="AdminAccess"> 
      <tr> 
       <td>********</td> 
       <td><img alt="" height="16" src="../images/edit.png" width="16"></td> 
       <td><a href="admins_edit.html">Edit</a></td> 
       <td><img alt="" height="16" src="../images/mail.png" width="16"></td> 
       <td><a href="#">Send new password</a></td> 
       <td><img alt="" height="16" src="../images/delete.png" width="16"></td> 
       <td><a href="#">Delete</a></td> 
      </tr> 
      <tr> 
       <td>********</td> 
       <td><img alt="" height="16" src="../images/edit.png" width="16"></td> 
       <td><a href="admins_edit.html">Edit</a></td> 
       <td><img alt="" height="16" src="../images/mail.png" width="16"></td> 
       <td><a href="#">Send new password</a></td> 
       <td><img alt="" height="16" src="../images/delete.png" width="16"></td> 
       <td><a href="#">Delete</a></td> 
      </tr> 
      <tr> 
       <td>********</td> 
       <td><img alt="" height="16" src="../images/edit.png" width="16"></td> 
       <td><a href="admins_edit.html">Edit</a></td> 
       <td><img alt="" height="16" src="../images/mail.png" width="16"></td> 
       <td><a href="#">Send new password</a></td> 
       <td><img alt="" height="16" src="../images/delete.png" width="16"></td> 
       <td><a href="#">Delete</a></td> 
      </tr> 
      <tr> 
       <td>********</td> 
       <td><img alt="" height="16" src="../images/edit.png" width="16"></td> 
       <td><a href="admins_edit.html">Edit</a></td> 
       <td><img alt="" height="16" src="../images/mail.png" width="16"></td> 
       <td><a href="#">Send new password</a></td> 
       <td><img alt="" height="16" src="../images/delete.png" width="16"></td> 
       <td><a href="#">Delete</a></td> 
      </tr> 
     </table>

テーブル自体の幅が70％を得た、とクラス、AdminAccess、このCSSを得た：

table.AdminAccess tr td:nth-child(1) {width:48%;} 
table.AdminAccess tr td:nth-child(2) {width:3%; padding:4px 0px 0px 0px;} 
table.AdminAccess tr td:nth-child(3) {width:11%;} 
table.AdminAccess tr td:nth-child(4) {width:3%; padding:4px 0px 0px 0px;} 
table.AdminAccess tr td:nth-child(5) {width:30%;} 
table.AdminAccess tr td:nth-child(6) {width:3%; padding:4px 0px 0px 0px;} 
table.AdminAccess tr td:nth-child(7) {width:2%; text-align:right} 
table.AdminAccess tr td { 
    vertical-align:middle; 
    padding:5px; 
}

そして、いくつかの背景のCSSましたここでは重要ではないはずです。

基本的に、IEでこのように動作する理由は他にありません。私が言ったように。それは私のテーブルのほんの一部です。いくつかは、正確にこのようにスタイルが設定されていますが、内容は異なります。だから、私は失われています。再度、レイアウト自体は重要ではありませんが、何が間違っているかを知ることはうれしいでしょう。

出典

2012-05-12 Denver Dang

私たちは話しているIEのどのバージョン？ – Sampson