- ベストアンサー
リンクの下線のガタつきを解消する方法について
- リンクの下線のガタつきを解消する方法について教えてください
- ソースコードの一部を修正することでリンクの下線のガタつきが解消できるか確認しましたが、他の要素が影響を受ける可能性もあるため、回避策を模索しています
- IE6でのみリンクの下線がガタつく現象を解消する方法をご教示いただけないでしょうか
- みんなの回答 （5）
- 専門家の回答
質問者が選んだベストアンサー
td * {vertical-align:middle;}で P要素と A要素に vertical-align:middleが適用されますが、 td * {vertical-align:middle;} td a {vertical-align:baseline;} /* 追加 */ とし、A要素の指定のみを baselineに変えたところ、IE6でのガタつきがなくなり、表示位置も変わりませんでした。（IETester） 実際の環境でお試しください。
その他の回答 (4)
- ORUKA1951
- ベストアンサー率45% (5062/11036)
なら、IE6(シェア2.98%),IE5(シェア)を無視して妥協するか、 日本のバージョン別ブラウザシェアグラフ （StatCounter Global Statsより） ( http://lhsp.s206.xrea.com/misc/browser-share-version.html ) 他の方法でアイコンを配置するか・・ body { font-family: "MS PGothic",Sans-Serif; } td img { /* vertical-align:middle;*/ position:absolute; right:-62px; } td { border-bottom:1px dotted red; line-height:2em; } p { position:relative; width:auto; padding:0; margin: 5px 0; } それよりも、Transitinalではなくstrictで作成することを心がけたほうがよさそうな気がする。XHTML1.0strict、XTHML1.1、HTML5,XHTML5はHTML4.01strictと本質的に同じものだし。
お礼
ご回答ありがとうございます。 アイコンの数は不定で、今回はNo.5さんの修正方法が一番簡単だったのでそちらを採用させていただきました。 このたびはどうもありがとうございました。 以上、よろしくお願いします。
- naokita
- ベストアンサー率57% (1008/1745)
NO.2 naokitaです（お礼拝見済み） baselineにする事でズレは無くなりますが、 font-familyもミソでしょうね。 ------------------ dl{width:500px; line-height:1.2;} dt{ float: left; clear:left; padding: .3em 0; width: 6.5em; text-indent:18px; background:url(img.gif) no-repeat 0 .4em;} dd{ margin:0; padding-left: 6.5em; border-bottom: dotted 1px red;} dd p { margin:0; padding: .4em .2em .3em;} dd p img { vertical-align:middle; margin-left:.3em;} *:first-child+html dd p img { margin: 0 0 -.3em .3em;} * html dd p img { vertical-align:baseline; margin: 0 0 -.3em .3em;} <dl> <dt>2011/09/17</dt> <dd><p><a href="#">メッセージ１message２</a><img src="img.gif" width="16" height="16" alt="*" /></p></dd> <dt>2011/09/16</dt> <dd><p><a href="#">メッセージ１<br />message２メッセージ１</a><img src="img.gif" width="16" height="16" alt="*" /></p></dd> <dt>2011/09/10</dt> <dd><p><a href="#">メッセージ３</a><img src="img.gif" width="16" height="16" alt="*" /></p></dd> </dl>
お礼
ご回答ありがとうございます。 ぱっと見、動作しているように見受けられましたが、今回はNo.5さんの修正方法が一番簡単だったのでそちらを採用させていただきました。 このたびはどうもありがとうございました。 以上、よろしくお願いします。
- naokita
- ベストアンサー率57% (1008/1745)
<?xml version="1.0" encoding="Shift_JIS"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="ja" xml:lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=shift_jis" />
お礼
ご回答ありがとうございます。 ご教示いただいたソースを試した所、確かに解消したのですが、文字コードはサイトの根幹に関わり、これをUTF-8以外に変更することは避けたいと思います。 そのため、文字コードを変更しない形での回避策をご存知でしたら、アドバイスの程、よろしくお願いします。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=shift_jis" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <title>title</title> <style type="text/css"> <!-- body { font-family: "ＭＳ Ｐゴシック","MS PGothic",Sans-Serif; } td img { vertical-align:middle; } td { border-bottom:1px dotted red; } table td p { padding:0; margin: 5px 0; } --> </style> </head> <body> <table width="500" cellspacing="0" cellpadding="0" border="0" summary="記事一覧"> <tr> <td width="16"><p><img width="16" height="16" alt="" src="http://cdn.oshiete.goo.ne.jp/images/2010renew/arrow_green.png" /></p></td> <td width="90"><p>2011/09/19</p></td> <td><p><a href="http://oshiete.goo.ne.jp/">メッセージが表示されます。</a> <img src="http://cdn.oshiete.goo.ne.jp/images/2010renew/btn_twitter.png?20110912_1" alt="新着" /></p></td> </tr> <tr> <td width="16"><p><img width="16" height="16" alt="" src="http://cdn.oshiete.goo.ne.jp/images/2010renew/arrow_green.png" /></p></td> <td width="90"><p>2011/09/18</p></td> <td><p><a href="http://oshiete.goo.ne.jp/">メッセージ１メッセージ２メッセージ３メッセージ４メッセージ５メッセージ６メッセージ７</a> <img src="http://cdn.oshiete.goo.ne.jp/images/2010renew/btn_twitter.png?20110912_1" alt="新着" /></p></td> </tr> <tr> <td width="16"><p><img width="16" height="16" alt="" src="http://cdn.oshiete.goo.ne.jp/images/2010renew/arrow_green.png" /></p></td> <td width="90"><p>2011/09/17</p></td> <td><p><a href="http://oshiete.goo.ne.jp/">メッセージ１message２</a> <img src="http://cdn.oshiete.goo.ne.jp/images/2010renew/btn_twitter.png?20110912_1" alt="新着" /></p></td> </tr> <tr> <td width="16"><p><img width="16" height="16" alt="" src="http://cdn.oshiete.goo.ne.jp/images/2010renew/arrow_green.png" /></p></td> <td width="90"><p>2011/09/16</p></td> <td><p><a href="http://oshiete.goo.ne.jp/">メッセージ１message２メッセージ３メッセージ４メッセージ５メッセージ６メッセージ７message８</a></p></td> </tr> <tr> <td width="16"><p><img width="16" height="16" alt="" src="http://cdn.oshiete.goo.ne.jp/images/2010renew/arrow_green.png" /></p></td> <td width="90"><p>2011/09/10</p></td> <td><p><a href="http://oshiete.goo.ne.jp/">メッセージ３</a></p></td> </tr> </table> </body> </html> 以上、宜しくお願いします。
- ORUKA1951
- ベストアンサー率45% (5062/11036)
td * {vertical-align:middle;} の意味理解して使ってますか？ →5.3 全称セレクタ（Universal selector） ( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2/selector.html#universal-selector ) →10.8.1 行間と半行間（Leading and half-leading） ( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2/visudet.html#propdef-vertical-align ) ＞上記ソースの中の下記を消すとガタつく現象が回避できることは確認しました。 ＞td * {vertical-align:middle;} ＞ 複雑な話ではなく、この現象一つから結論は導き出せる結果は 『全称セレクタではなく、単純にタイプセレクタを記述すればよい』 はずです。すなわち td img{vertical-align:middle;} --子孫セレクタで詳細度は[0,0,0,2]ですね。!! なお、<td>内に文字がある場合は<p>、画像だけの場合は<p>なしで記述されていますが、いずれかに統一してください。<img>もインライン要素ですから<p></img></p>にしたほうが良いでしょう。 この場合も子孫セレクタで詳細度を上げて他の部分のpと設定が重ならないようにしましょう。 table td p { padding:0; margin:5px 0; /* 簡略化プロパティが使えるものは活用しましょう */ } →【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここから 'margin'は簡略化プロパティで、'margin-top'、'margin-right'、'margin-bottom'、'margin-left'という4つのプロパティを1箇所で設定できる。 ￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで［ボックスモデル( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2/box.html#propdef-margin )］より せっかくのカスケーディングスタイルシートです。継承や詳細度などカスケーディングを使わなきゃダメですよ。
お礼
ご回答ありがとうございます。 ご教示いただいたソースを試してみたのですが、IE6でリンクの下線のガタつきを解消する事はできませんでした(下記のソースの2011/09/17の行で確認できると思います)。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <title>title</title> <style type="text/css"> <!-- body { font-family: "ＭＳ Ｐゴシック","MS PGothic",Sans-Serif; } td img { vertical-align:middle; } td { border-bottom:1px dotted red; } p { padding:0; margin: 5px 0; } --> </style> </head> <body> <table width="500" cellspacing="0" cellpadding="0" border="0" summary="記事一覧"> <tr> <td width="16"><p><img width="16" height="16" alt="" src="http://cdn.oshiete.goo.ne.jp/images/2010renew/arrow_green.png" /></p></td> <td width="90"><p>2011/09/19</p></td> <td><p><a href="http://oshiete.goo.ne.jp/">メッセージが表示されます。</a> <img src="http://cdn.oshiete.goo.ne.jp/images/2010renew/btn_twitter.png?20110912_1" alt="新着" /></p></td> </tr> <tr> <td width="16"><p><img width="16" height="16" alt="" src="http://cdn.oshiete.goo.ne.jp/images/2010renew/arrow_green.png" /></p></td> <td width="90"><p>2011/09/18</p></td> <td><p><a href="http://oshiete.goo.ne.jp/">メッセージ１メッセージ２メッセージ３メッセージ４メッセージ５メッセージ６メッセージ７</a> <img src="http://cdn.oshiete.goo.ne.jp/images/2010renew/btn_twitter.png?20110912_1" alt="新着" /></p></td> </tr> <tr> <td width="16"><p><img width="16" height="16" alt="" src="http://cdn.oshiete.goo.ne.jp/images/2010renew/arrow_green.png" /></p></td> <td width="90"><p>2011/09/17</p></td> <td><p><a href="http://oshiete.goo.ne.jp/">メッセージ１message２</a> <img src="http://cdn.oshiete.goo.ne.jp/images/2010renew/btn_twitter.png?20110912_1" alt="新着" /></p></td> </tr> <tr> <td width="16"><p><img width="16" height="16" alt="" src="http://cdn.oshiete.goo.ne.jp/images/2010renew/arrow_green.png" /></p></td> <td width="90"><p>2011/09/16</p></td> <td><p><a href="http://oshiete.goo.ne.jp/">メッセージ１message２メッセージ３メッセージ４メッセージ５メッセージ６メッセージ７message８</a></p></td> </tr> <tr> <td width="16"><p><img width="16" height="16" alt="" src="http://cdn.oshiete.goo.ne.jp/images/2010renew/arrow_green.png" /></p></td> <td width="90"><p>2011/09/10</p></td> <td><p><a href="http://oshiete.goo.ne.jp/">メッセージ３</a></p></td> </tr> </table> </body> </html> 何か私が勘違いして移植しているのでしょうか？ 引き続きアドバイスのほど、よろしくお願いします。 以上、宜しくお願いします。
お礼
ご回答ありがとうございます。 ご教示いただいたソースで意図した動作となりました。 このたびはどうもありがとうございました。 以上、よろしくお願いします。