1

次のような単純なテーブルがあります。

<table border="1">
<tr>
    <td>title1</td>
    <td>title2</td>
    <td>title3</td>
</tr>
<tr>
   <td><a href="#">item1_1</a></td>
   <td><a href="#">item1_1</a></td>
   <td><a href="#">item1_1</a></td>
</tr>
<tr>
    <td><a href="#">item1_1</a></td>
    <td><a href="#">item1_1</a></td>
    <td><a href="#">item1_1</a></td>
</tr>
<tr>
    <td><a href="#">item1_1</a></td>
    <td><a href="#">item1_1</a></td>
    <td><a href="#">item1_1</a></td>
</tr>
</table>

私のCSSと組み合わせると、結果は次のようになります: http://jsfiddle.net/yzsfH/

ご覧のとおり、テーブルにカーソルを合わせると、テーブル内のハイパーリンクが「移動」します。もちろん、その動きは望ましくない効果であり、私はそれを取り除きたい. いろいろ調べてみましたが、満足のいくものは見つかりませんでした。

なぜこれが起こっているのか、それを修正する方法を誰かが説明できますか?

4

6 に答える 6

1

bold 属性を使用して要素を強調表示する代わりに、適切なアプローチは、現在ホバーされているリンクに別の色を与えることです。そうすれば、この種の問題は発生しません!

次のように、bold 属性を削除して、色を別のものに変更するだけです。

a:hover 
{ 
  text-decoration:none; 
  color:#000000;
}

何かを太字にすると、レンダリングするサイズが大きくなること、およびこれが一般的に推奨されるアプローチであることを覚えておいてください。

これは動作中のjsFiddleです- http://jsfiddle.net/yzsfH/5/

于 2013-03-20T13:58:19.803 に答える
1

これは、テキスト サイズが大きくなったために幅が大きくなっていることがわかるかもしれません。(太字)

したがって、a問題を解決するタグに以下のプロパティを与えます。

a{
  display:block;
  width:55px;  /* give fixed width here */
}

固定幅が割り当てられていても、その中のコンテンツが増加すると幅も増加するため、固定幅を与えるのtdは無駄です。td

働くフィドル

于 2013-03-20T14:00:53.777 に答える
0

テキストが太くなると、幅が広がります。セルがテキストを囲み、テキストの幅が広くなったため、セルはこれに対応するために幅が広くなります。修正するには、明るいフォントを使用し、ホバーすると暗くなります。

于 2013-03-20T13:58:03.907 に答える
0

This is happening because a bold font is wider than a normal font. Try centring your text and making the cell slightly wider.

于 2013-03-20T13:57:18.327 に答える
0

bolder text = larger text ... it's not a bug, it's an obvious feature try forcing the width of your td's (using CSS of course) so that their width doesn't depend on the width of the text in it...

于 2013-03-20T13:57:25.957 に答える
-1

この問題を修正するには 修正幅:50px; を指定します。

于 2015-08-27T09:22:13.983 に答える