おすすめのモーニング・朝食メニューを教えて！

リンクの下線のガタつきを解消する方法について

解決済

  • 質問者：iroha_168
  • 質問日時：
  • 回答数：5件

下記のソースを主要ブラウザで表示チェックした所、IE6でリンクの下線がガタついてしまいました。
http://ameblo.jp/coosytest/entry-10324805136.htmlと同様の現象だと思います。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitio …
<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 * {
vertical-align:middle;
}
td {
border-bottom:1px dotted red;
}
p {
padding:0;
margin-top: 5px;
margin-right: 0;
margin-bottom: 5px;
margin-left: 0;
}
-->
</style>
</head>
<body>
<table width="500" cellspacing="0" cellpadding="0" border="0" summary="記事一覧">
<tr>
<td width="16"><img width="16" height="16" alt="" src="http://cdn.oshiete.goo.ne.jp/images/2010renew/ar … /></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/bt … alt="新着" /></p></td>
</tr>
<tr>
<td width="16"><img width="16" height="16" alt="" src="http://cdn.oshiete.goo.ne.jp/images/2010renew/ar … /></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/bt … alt="新着" /></p></td>
</tr>
<tr>
<td width="16"><img width="16" height="16" alt="" src="http://cdn.oshiete.goo.ne.jp/images/2010renew/ar … /></td>
<td width="90"><p>2011/09/17</p></td>
<td><p><a href="http://oshiete.goo.ne.jp/">メッセージ１message２</a></p></td>
</tr>
<tr>
<td width="16"><img width="16" height="16" alt="" src="http://cdn.oshiete.goo.ne.jp/images/2010renew/ar … /></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"><img width="16" height="16" alt="" src="http://cdn.oshiete.goo.ne.jp/images/2010renew/ar … /></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>

上記ソースの中の下記を消すとガタつく現象が回避できることは確認しました。
td * {
vertical-align:middle;
}
ただし、これを行うとtwitterの画像が天地中央揃えになっていたのが、上揃えになってしまうようなので、この記述は有効のままにしたいと思います。

また、下記を消してもガタつく現象が回避できることは確認しました。
body {
font-family: "ＭＳ Ｐゴシック","MS PGothic",Sans-Serif;
}
ただし、これを行うとこの部分のフォントが意図しないフォントになってしまうため、出来れば回避したいと思っています(回避策がなければIE6だけフォント指定を消すかもしれませんが)。

FirefoxやChromeなどで見た際の表示は今のソースのままで大丈夫そうなので、今の表示を維持したままIE6のリンクのガタつきを解消したいと思ったのですが、どうすれば良いかわからなかったので
アドバイスいただける方がいらっしゃいましたら、ご教示の程、よろしくお願いします。

以上、よろしくお願いします。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

A 回答 (5件)

No.5ベストアンサー

  • 回答者： Questa
  • 回答日時：

td * {vertical-align:middle;}で P要素と A要素に vertical-align:middleが適用されますが、



td * {vertical-align:middle;}
td a {vertical-align:baseline;}/* 追加 */

とし、A要素の指定のみを baselineに変えたところ、IE6でのガタつきがなくなり、表示位置も変わりませんでした。（IETester）

実際の環境でお試しください。
    • good
    • 0
    • 件
通報する
この回答へのお礼

ご回答ありがとうございます。
ご教示いただいたソースで意図した動作となりました。

このたびはどうもありがとうございました。
以上、よろしくお願いします。

通報する
お礼日時：2011/09/23 11:07

No.4

  • 回答者： ORUKA1951
  • 回答日時：

なら、IE6(シェア2.98%),IE5(シェア)を無視して妥協するか、


日本のバージョン別ブラウザシェアグラフ （StatCounter Global Statsより） ( http://lhsp.s206.xrea.com/misc/browser-share-ver … )


他の方法でアイコンを配置するか・・
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と本質的に同じものだし。
    • good
    • 0
    • 件
通報する
この回答へのお礼

ご回答ありがとうございます。
アイコンの数は不定で、今回はNo.5さんの修正方法が一番簡単だったのでそちらを採用させていただきました。

このたびはどうもありがとうございました。
以上、よろしくお願いします。

通報する
お礼日時：2011/09/23 11:09

No.3

  • 回答者： naokita
  • 回答日時：

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>
    • good
    • 0
    • 件
通報する
この回答へのお礼

ご回答ありがとうございます。
ぱっと見、動作しているように見受けられましたが、今回はNo.5さんの修正方法が一番簡単だったのでそちらを採用させていただきました。

このたびはどうもありがとうございました。
以上、よろしくお願いします。

通報する
お礼日時：2011/09/23 11:10

No.2

  • 回答者： naokita
  • 回答日時：

<?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-transitio …
<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" />
    • good
    • 0
    • 件
通報する
この回答へのお礼

ご回答ありがとうございます。
ご教示いただいたソースを試した所、確かに解消したのですが、文字コードはサイトの根幹に関わり、これをUTF-8以外に変更することは避けたいと思います。
そのため、文字コードを変更しない形での回避策をご存知でしたら、アドバイスの程、よろしくお願いします。


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitio …
<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/ar … /></p></td>
<td width="90"><p>2011/09/19</p></td>
<td><p><a href="http://oshiete.goo.ne.jp/">メッセージが表示されます。</a>&nbsp;<img src="http://cdn.oshiete.goo.ne.jp/images/2010renew/bt … alt="新着" /></p></td>
</tr>
<tr>
<td width="16"><p><img width="16" height="16" alt="" src="http://cdn.oshiete.goo.ne.jp/images/2010renew/ar … /></p></td>
<td width="90"><p>2011/09/18</p></td>
<td><p><a href="http://oshiete.goo.ne.jp/">メッセージ１メッセージ２メッセージ３メッセージ４メッセージ５メッセージ６メッセージ７</a>&nbsp;<img src="http://cdn.oshiete.goo.ne.jp/images/2010renew/bt … alt="新着" /></p></td>
</tr>
<tr>
<td width="16"><p><img width="16" height="16" alt="" src="http://cdn.oshiete.goo.ne.jp/images/2010renew/ar … /></p></td>
<td width="90"><p>2011/09/17</p></td>
<td><p><a href="http://oshiete.goo.ne.jp/">メッセージ１message２</a>&nbsp;<img src="http://cdn.oshiete.goo.ne.jp/images/2010renew/bt … alt="新着" /></p></td>
</tr>
<tr>
<td width="16"><p><img width="16" height="16" alt="" src="http://cdn.oshiete.goo.ne.jp/images/2010renew/ar … /></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/ar … /></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>

以上、宜しくお願いします。

通報する
お礼日時：2011/09/19 15:51

No.1

  • 回答者： ORUKA1951
  • 回答日時：

td * {vertical-align:middle;}


の意味理解して使ってますか？
→5.3 全称セレクタ（Universal selector） ( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2 … )
→10.8.1 行間と半行間（Leading and half-leading） ( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2 … )

＞上記ソースの中の下記を消すとガタつく現象が回避できることは確認しました。
＞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 … )］より

　せっかくのカスケーディングスタイルシートです。継承や詳細度などカスケーディングを使わなきゃダメですよ。
    • good
    • 0
    • 件
通報する
この回答へのお礼

ご回答ありがとうございます。
ご教示いただいたソースを試してみたのですが、IE6でリンクの下線のガタつきを解消する事はできませんでした(下記のソースの2011/09/17の行で確認できると思います)。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitio …
<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/ar … /></p></td>
<td width="90"><p>2011/09/19</p></td>
<td><p><a href="http://oshiete.goo.ne.jp/">メッセージが表示されます。</a>&nbsp;<img src="http://cdn.oshiete.goo.ne.jp/images/2010renew/bt … alt="新着" /></p></td>
</tr>
<tr>
<td width="16"><p><img width="16" height="16" alt="" src="http://cdn.oshiete.goo.ne.jp/images/2010renew/ar … /></p></td>
<td width="90"><p>2011/09/18</p></td>
<td><p><a href="http://oshiete.goo.ne.jp/">メッセージ１メッセージ２メッセージ３メッセージ４メッセージ５メッセージ６メッセージ７</a>&nbsp;<img src="http://cdn.oshiete.goo.ne.jp/images/2010renew/bt … alt="新着" /></p></td>
</tr>
<tr>
<td width="16"><p><img width="16" height="16" alt="" src="http://cdn.oshiete.goo.ne.jp/images/2010renew/ar … /></p></td>
<td width="90"><p>2011/09/17</p></td>
<td><p><a href="http://oshiete.goo.ne.jp/">メッセージ１message２</a>&nbsp;<img src="http://cdn.oshiete.goo.ne.jp/images/2010renew/bt … alt="新着" /></p></td>
</tr>
<tr>
<td width="16"><p><img width="16" height="16" alt="" src="http://cdn.oshiete.goo.ne.jp/images/2010renew/ar … /></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/ar … /></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>

何か私が勘違いして移植しているのでしょうか？
引き続きアドバイスのほど、よろしくお願いします。

以上、宜しくお願いします。

通報する
お礼日時：2011/09/19 13:10

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！

Q質問する（無料）

ページトップページトップ

おすすめ情報

Q質問する（無料）

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング

おすすめ情報