1

5 台の異なるコンピューター、同じブラウザー (firefox 14.01) で同じ解像度を使用し、そのうちの 1 台は Mac で、3 台は ubuntu で実行され、最後の 1 台は Windows 7 で実行されています。

すべてのテストは、プラグインなしでクリーンなブラウザーで実行されました...

また、画面を交換しようとしましたが、ブラウザに問題があったとしても、何も変わりません。

また、firebug を使用して、すべての要素を比較しましたが、リンク () が 2 台のコンピューターでさらに 2 つのピクセルを持っていることを除いて、すべて同じです。

すべてのブラウザー (Opera、Chrome、Firefox、Safari、IE 7-8-9) で試してみましたが、Firefox にない場合は問題ありませんが、ある場合は問題がありますすべてのブラウザ...

多くの html 要素の表示に問題があります。

だからここに私の質問があります：これを引き起こす原因は何ですか？

ここに私のHTMLコードがあります:

<td style="text-align:center">
    <a style="margin-right: 10px;" href="#">
        <img alt="View" src="/statics/images/Form/view.png">
     </a>

    <a style="margin-right: 10px;">
        <img alt="Edit" src="/statics/images/Form/edit.png">
    </a>

    <a style="margin-right: 10px;" href="#" >
        <img alt="Delete" src="/statics/images/Form/delete.png">
    </a>
</td>

a の CSS コードは次のとおりです。

a {
    margin-right: 10px;
    cursor: pointer;
    text-decoration: underline;
}

ここに写真があります：

動作していない場合: 動作しない

それが働いているとき：働く

どんな提案でも大歓迎です！

君たちありがとう...

表示されるコンピューターに応じて、1 px のパディングトップを追加することがわかりました (幅に由来するため、これは問題ではないと思います)。

4

3 に答える 3

1

次のように設定してみてくださいa：

a {
    margin-right: 10px;
    text-decoration: none;
}

td a {
    display: inline-block;
    width: 27px;
}

簡単なテスト用に 27px の幅を設定し、画像のサイズに応じて適用します。

td3 つの画像をネストするのに十分な固定幅を に適用することもできます。

于 2012-07-19T19:48:02.870 に答える
1

これを試してから、幅を減らしてみてください。

<td style="text-align:center; width: 200px">

画像をリンクで囲んでいるため、枠線を付けている可能性があります (これは非常に古いブラウザーの場合であり、css リセットでは発生しないはずですが...)

a img { border: 0 }
于 2012-07-19T19:46:20.007 に答える
0

{

margin-right: 10px; 
text-decoration: none;

}

a:ホバー{

margin-right: 10px; 
text-decoration: underline;

}

  1. インライン スタイル タグを削除
  2. javascript:void() または javascript:; を使用して、すべてのタグに href を追加することをお勧めします。それ以外の ＃
于 2012-07-19T19:38:58.327 に答える