2

IEのテーブルに問題があります。おかしなことに、これを選択するのは一部のテーブルだけですが、それでも理由はわかりません。実は、レイアウトなどを台無しにしているわけではありませんが、それでも、なぜ実際にそうなっているのか知りたいです。私が何を意味するかがわかるように、写真を添付し​​ました。

ここに画像の説明を入力してください

上はChrome/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でこのように動作し、他のブラウザでは動作しない理由はわかりません。私が言ったように。それは私のテーブルのほんの一部です。正確にこのようにスタイル設定されているものの、内容が異なるものは、それを行いません。だから、私は迷子になりました。繰り返しになりますが、レイアウト自体にとって重要というわけではありませんが、何が問題なのかを知っておくと便利です。

4

1 に答える 1

2

にはtable.AdminAccess tr td:nth-child(7)、を指定しましwidth: 2%た。

テーブルの幅の2％は、「削除」を含めるのに十分ではありません。

このため、ブラウザは他の列の幅を調整して補正する必要があります。Chrome/Firefoxがこの調整をIE9とは異なる方法で行うのはたまたまです。

これが私が作ったテストケースです：http：//jsfiddle.net/thirtydot/hC53w/show/

列がChrome/IE9間で整列していません。

「削除」を「！」に変更すると、整列します：http: //jsfiddle.net/thirtydot/hC53w/1/show/

于 2012-05-12T16:47:06.793 に答える