IEとfirefoxの高さ表示について

[新着] Webテンプレートを仮オープンしました

0   名前： ためじろう ： 2006/05/22（月） 18:52  ID:6qNnU2Pi
はじめまして。連続の質問失礼致します。
インターネットや本で調べ、試行錯誤を繰り返しましたが
解決されませんでした。

現在、上下に1pxのラインが入った横型のリンクナビゲーションを
作成したいと考えているのですが、firefoxでは意図したとおり表示されるのに対し
IEではどうしても下のラインが2pxほどの太さになってしまいます。

menuボックスの高さやborderを変更したりしてみましたが
解消されません。

下にHTMLタグとスタイルシートを掲載させて頂きました。
すいませんが、教えていただけたら幸いです。
宜しくお願いします。


【HTMLファイル】
<div id="menu">
<ul>
<li class="home"><a href="">トップページ</a></li>
<li><a href="">あいうえ</a></li>
<li><a href="">おかきくけこ</a></li>
<li><a href="">さしすせそたちつてとなに</a></li>
<li><a href="">ぬねのは</a></li>
<li><a href="">ひふへほま</a></li>
</ul>
</div><!-- menu -->


【スタイルシートファイル】
body{
margin:0;
padding:0;
}
h1,h2,h3,h4,h5,h6,p,pre,blockquote,ul,ol,dl,dd,hr{
margin:0;
padding:0;
}
blockquote,li,dt,dd{
margin:0;
padding:0;
}
li{
list-style:none;
}

#menu{
width:638px; height:32px;
background-color:#31402A;
margin-top:38px;
border-top:solid 1px #31402A;
border-bottom:solid 1px #31402A;
}
#menu ul{
margin-left:9px;
}
#menu li{
float:left;
border-right:solid 1px #DBF0C4;
font-size:13px;
}
#menu li.home{
border-left:solid 1px #DBF0C4;
}
#menu a,#menu a:link,#menu a:visited{
text-decoration:none;
color:#FFFFFF;
background-color:#31402A;
padding:8px 15px;
display:block;
}
#menu a:hover{
color:#31402A;
background-color:#DBF0C4;
}


1   名前： Z ◆XTzyosZXcL ： 2006/05/22（月） 18:52  ID:AfjMLzNl
　一部のユーザーエージェントでは、文書型宣言におけるDTD(文書型定義）のURIがあるなしでレンダリングが変わるそうです。
　「DOCTYPE スイッチ」で検索してみてください（このサイトでも以前の書き込みでこの件が指摘されています）。

参考）
http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/global.html#h-7.2
http://www.w3.org/TR/1999/REC-html401-19991224/struct/global.html#h-7.2
http://members.jcom.home.ne.jp/pctips/www/DOCTYPE.html
http://members.jcom.home.ne.jp/jintrick/Personal/markup_dtd.html
http://www.kanzaki.com/docs/html/doctype.html
2   名前： 匿名 ： 2006/05/22（月） 18:52
＞IEではどうしても下のラインが2pxほどの太さになってしまいます。

スタイルシートの最後に
#menu, #menu * {
border-color: black !important;
	color: black !important;
	background: white !important;
}

と追加すればわかると思うが、ボーダーの太さの問題ではない。

これは確かに>>1の指摘するDOCTYPEスイッチが関係するのだが、標準モードのIEで高さがおかしくなる。
liのheightを明示（100%でよい）してやればとりあえず回避可能。

>>1
さすがにその参考リンクから探し出せというのは酷というものだろう。（ベンダが勝手に実装したDOCTYPEスイッチと、HTML4仕様はまるで無関係）
リンクくらいは該当箇所にピンポイントで張ってあげてはどうか。
3   名前： Z ◆XTzyosZXcL ： 2006/05/22（月） 18:52  ID:AfjMLzNl
>>2
　検索エンジンで検索をかけてみましたが、いかがでしょうか。

http://www.google.co.jp/search?hl=ja&q=DOCTYPE+%E3%82%B9%E3%82%A4%E3%83%83%E3%83%81&lr=lang_ja

　なお、下記資料でも述べられていますが、全てのWebブラウザで同じ表示をさせようとしても労力の割には報われないと思います。どこかで妥協する、というのが一番無難でしょう（製作者CSSで閲覧者が見てくれている保証はありませんし）。

参考）
http://members.jcom.home.ne.jp/jintrick/Personal/markup.html
http://members.jcom.home.ne.jp/pctips/www/faq/Mibae.html
http://lan.rgr.jp/essay/recommend
http://deztec.jp/design/05/02/20_css.html
http://web.xii.jp/iec/note/checker
4   名前： 匿名 ： 2006/05/22（月） 18:52
>>3
俺の言い方が悪かったようだ。

・>>1では前半でDOCTYPEスイッチの話題なのに後半の参考リンクはDOCTYPEスイッチとはまるで関係ないということ。（DOCTYPEスイッチが公式仕様であるかのような誤解すら生みかねない）
・>>0のソースで問題が生じるのはIE標準モードであり、質問者は文書型宣言をすでに知っているので、今ここで「文書型宣言の重要性」を殊更にとり上げる必要は無いということ。

さらに>>3は

・検索エンジンの検索結果URLだけを貼り付ける行為を禁じている掲示板も多い。（ここはそうではないが、なぜそういうルールも存在するのかは一考の価値がある）
・今回の主題である「ブラウザのバグ」の話と「製作者スタイル」の話はまるで無関係であること。

貴方の言いたいことはわかるし、それが重要だということも承知するが、
「なぜ今その話を持ち出すの？」「それがこの質問とどう関係するの？」という部分がわからない。
言いたいことが沢山あるのはわかるが、どれが一番言いたいことなのかがわからない。

その辺はコピペではなく、質問ごとに自分の回答の意図を説明する必要があるように思う。
ということだったのです。
5   名前： Z ◆XTzyosZXcL ： 2006/05/22（月） 18:52  ID:qrtxnX1m
>>4
「質問者は文書型宣言をすでに知っているので」とおっしゃる根拠が分からないのですが、確かに>>1の提示資料は説明が足りなかったと思います。「文書型宣言について自体の説明」と前置きをしておけばよかったですね。

　とりあえず、IDは違えど

http://www.tagindex.com/cgi-lib/q3bbs/patio.cgi?mode=view&no=266

と同じ方のようですので、そちらでの結論からすれば>>3で提示した資料は無駄にはならないと信じています。

>>どれが一番言いたいことなのかがわからない
　提示した資料はあくまで「参考」で、本文では「なお」書き以下で結論としたのですが(^^;
「ＡするならＢで、直接関係のないＣやＤは発言すら無駄である」とおっしゃるのであれば、私にはそれ以上補足できるものがありませんので発言を差し控えます。
6   名前： カヅサツ ◆ThCi95HEzw ： 2006/05/22（月） 18:52  ［URL］  ID:O5hEMlpW
>>4

質問があるのですが、スレ違いかと思うので、下記スレに投稿しました。
http://www.tagindex.com/cgi-lib/bbs/patio.cgi
一覧へ戻る