3

明らかなことを見逃しているかもしれませんが、Chromeがこのテーブルの最後の列をラップしている理由についてのヒントはありますか？コンテンツが収まるように列幅を計算するべきではありませんか？（テーブルが実際にページを埋めていない場合）。IEとFirefoxの両方がそれをうまくレンダリングしているようです（または少なくとも私が期待する方法で）。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<style>
.imgLink {
    margin: 0 8px;
}
</style>
</head>

<body>
    <table border="1">
        <tr>
        <td>Some text</td>
        <td>Some more text</td>
        <td><span class="imgLink"><a href=""><img src="iconEdit.gif">Edit</a></span>
            <span class="imgLink"><a href=""><img src="iconDelete.gif">Delete</a></span></td>
        </tr>
    </table>
</body>
</html>

編集：

テーブルが利用可能なページ幅を埋めていません。

Chromeでのラッピングを示すスクリーンショットは次のとおりです。

Chromeのスクリーンショット

私は実際にこれの回避策を見つけました-white-space: nowrap;テーブルの最後の列に追加するだけです。それでも、Chromeが幅を正しく計算していないか、何かが足りないのではないかと思います。何が起こっているのか知りたいのですが。

4

3 に答える 3

2

display:inline-block を imgLink クラスに追加: http://jsfiddle.net/surendraVsingh/MFZX2/4/

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<style>
.imgLink {
    margin: 0 8px;
    display:inline-block;
}
</style>
</head>
<body>
    <table border="1">
        <tr>
        <td>Some text</td>
        <td>Some more text</td>
        <td><span class="imgLink"><a href=""><img src="https://dl.dropbox.com/u/19982181/a.png">Edit</a></span>
            <span class="imgLink"><a href=""><img src="https://dl.dropbox.com/u/19982181/a.png">Delete</a></span></td>
        </tr>
    </table>
</body>
</html>

Grodriguez が考え出したもう 1 つの答えは、最後の列に空白: nowrap を適用することです。

于 2012-06-29T08:50:31.250 に答える
2

ここで推測するだけですが、Chrome はテーブル セルの幅を計算する際にエラーを起こすと思います。インライン要素にはマージンがないと想定されているため、マージンを考慮せずに td の幅を計算します。ただし、とにかくマージンを使用してスパンを描画するため、スパンは幅が広すぎて td の計算された幅に収まらず、折り返されます。

したがって、可能な解決策は次のとおりです。

  • inline-blockインラインブロックは通常マージンを持つことができ、計算はうまくいくので、スパンを作ります
  • 最終的な合計幅がどうなるかを計算し、その幅を td に与える
  • スパンからマージンを削除し、それを imgs に与える
  • マージンをまったく使用しないで、td にいくらかのパディングを与える
于 2012-06-29T12:13:39.913 に答える
1

SVSの回答に追加すると、これspanはインライン要素であり、マージンを持つことは許可されていないと思われます。クロムが「まあ、これにマージンが必要な場合は、ブロック要素にする必要があります」と言って、ブロック要素にすることを想像します。また、ブロック要素であるため、2 つspanの s を並べて配置することはなく、改行も行いません。

これは、 を に設定すると、スタイルからプロパティを削除するのと同じようdisplayに機能するという事実によってほぼ確認されます。inline-blockmargin

于 2012-06-29T10:20:54.647 に答える