- 締切済み
IE6/7でtable幅が効かない
こんにちわ。 クライアントのサイトを作成しており、 table部分のバグが発見されました。 画像の通りなのですが、それぞれの幅を同じにしたいのですが、 IE6/7だけ狭くなったり広くなったりしています。 IE6/7は無視してきたのですが、クライアントから指摘され困っています。 どなたかこの現象を修正する方法がありましたらご教示ください。 table { border-left:1px solid #C7C7C7; border-top:1px solid #C7C7C7; width:100%; } th { border-bottom:1px solid #C7C7C7; border-right:1px solid #C7C7C7; width:165px; table-layout:fixed; padding:8px 18px; background-color:#F2F2F2; font-weight:bold; } td { border-bottom:1px solid #C7C7C7; border-right:1px solid #C7C7C7; padding:8px 18px; } よろしくお願い致します。
- pikohitomi
- お礼率79% (79/99)
- CSS
- 回答数2
- ありがとう数1
- みんなの回答 （2）
- 専門家の回答
みんなの回答
- ORUKA1951
- ベストアンサー率45% (5062/11036)
とりあえず、サンプルをそのまま表示してみてください。ウィンドウ幅を変えてみる。 なおthの行は ＿＿＿＿<tr> ＿＿＿＿＿<th abbr="名称">Name</th> ＿＿＿＿＿<th abbr="要素">Related Elements</th> ＿＿＿＿＿<th abbr="タイプ">Type</th> ＿＿＿＿＿<th abbr="コメント">Comment</th> ＿＿＿＿</tr> のほうがよいかも。 その場合DOCTYPEは、 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> になります。 ＞上記を宣言していたのですがtransitionalはもうないでしょうか。 HTML自体は『どのバージョンのHTMLも、コンテンツプロバイダの投資が無駄にならないよう、また短期間で文書が読み取り不能となったりすることがないよう、産業界の幅広い賛同を反映するようにされてきた。( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/intro/intro.html#h-2.2.1 )』『過去との互換性のため、HTML 4 を解釈するツールについては、HTML 3.2 ([HTML32]参照)並びにHTML 2.0 ([RFC1866]参照)をもサポートすることを推奨する。( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/conform.html#h-4.1 )』のように過去への互換性がブラウザには求められていますから、使い続ける事はできます。 しかし、1999年のHTML4.01の勧告のとき ★HTML文書を作る場合には、この仕様における、他のDTDセットではなく strict DTD に適合する文書を作るよう推奨する。( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/conform.html#h-4.1 ) 【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここから 推奨しない 推奨しない要素・属性とは、新しい枠組みができたことによって、陳腐化したものを指す。推奨しない要素は、リファレンスマニュアルの各所で定義し、推奨しないことを明記する。 推奨しない要素は、HTMLの将来のバージョンでは廃止になる可能性がある。 ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ ￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで［Conformance: requirements and recommendations (ja)( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/conform.html#h-4.1 )］より ★予告どおり、HTML5ではプレゼンテーションだけを目的とする要素、属性はすべて廃止されます。 ＞> いまどき、さすがtransitinalはないでしょうから、 の理由は、そういう意味です。サンプルをご覧になると文書構造しか書かれていないHTMLは極めてシンプルで「文書提供コストを低下でき、文書の改訂も容易になる( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/intro/intro.html#h-2.4.1 )」の意味がわかるかと・・
- ORUKA1951
- ベストアンサー率45% (5062/11036)
DOCTYPE宣言で標準モードで動作してない。 ⇒DOCTYPE スイッチ - Google 検索( https://www.google.co.jp/search?q=DOCTYPE%20%E3%82%B9%E3%82%A4%E3%83%83%E3%83%81 ) いまどき、さすがtransitinalはないでしょうから、strictで簡単なサンプル IE5以降は問題ないはずです。 ★タブは＿に置換してあるので戻す。 ★Another HTML Lint - Gateway( http://www.htmllint.net/html-lint/htmllint.html# ) でチェック済みのHTML4.01strict+CSS2.1です。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="ja"> <head> ＿<meta http-equiv="content-type" content="text/html; charset=Shift_JIS"> ＿<title>サンプル</title> ＿<meta name="author" content="ORUKA1951"> ＿<meta http-equiv="Content-Style-Type" content="text/css"> ＿<link rev="made" href="mailto:oruka1951@hoge.com" title="send a mail" > ＿<link rel="START" href="../index.html"> ＿<style type="text/css"> <!-- html,body{margin:0;padding:0;} h1,h2,h3,h4,h5,h6{margin:0;line-height:1.6em;} p{text-indent:1em;} div.header,div.section,div.footer{width:90%;min-width:630px;max-width:900px;margin:0 auto;padding:5px;position:relative;} table{ border-collapse:collapse; border:solid 1px silver; width:100%; table-layout:fixed; } th{ border:1px solid silver; width:25%; padding:8px 18px; background-color:#F2F2F2; } td { border:1px solid #C7C7C7; padding:8px 18px; } --> ＿</style> </head> <body> ＿<div class="header"> ＿＿<h1>タイトル</h1> ＿＿<p>このページでは・・・・</p> ＿</div> ＿<div class="section"> ＿＿<h2>見出し</h2> ＿＿<p>本文はsection</p> ＿＿<table summary="価格表" border="1"> ＿＿＿<tbody> ＿＿＿＿<tr> ＿＿＿＿＿<th abbr="名称">Name</th> ＿＿＿＿＿<th abbr="要素">Related Elements</th> ＿＿＿＿＿<th abbr="タイプ">Type</th> ＿＿＿＿＿<th abbr="コメント">Comment</th> ＿＿＿＿</tr> ＿＿＿＿<tr> ＿＿＿＿＿<td>abbr</td> ＿＿＿＿＿<td>TD, TH</td> ＿＿＿＿＿<td>%Text;</td> ＿＿＿＿＿<td>abbreviation for header cell</td> ＿＿＿＿</tr> ＿＿＿＿<tr> ＿＿＿＿＿<td>accept-charset</td> ＿＿＿＿＿<td>FORM</td> ＿＿＿＿＿<td>%Charsets;</td> ＿＿＿＿＿<td>list of supported charsets</td> ＿＿＿＿</tr> ＿＿＿＿<tr> ＿＿＿＿＿<td>accept</td> ＿＿＿＿＿<td>FORM, INPUT</td> ＿＿＿＿＿<td>%ContentTypes;</td> ＿＿＿＿＿<td>list of MIME types for file upload</td> ＿＿＿＿</tr> ＿＿＿</tbody> ＿＿</table> ＿</div> ＿<div class="footer"> ＿＿<h2>文書情報</h2> ＿＿<dl class="documentHistry"> ＿＿＿<dt id="FIRST-PUBLISHED">First Published</dt> ＿＿＿<dd>2013-03-03</dd> ＿＿</dl> ＿</div> </body> </html>
補足
お返事頂きありがとうございました。 早速ORUKA1951さんの書いて下さった通りに変更したのですが、 変わらずでした。 質問と違うのですが・・ > いまどき、さすがtransitinalはないでしょうから、strictで簡単なサンプル > IE5以降は問題ないはずです。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 上記を宣言していたのですがtransitionalはもうないでしょうか。 お答えいただいてからドキッとし色々なWEBサイトを見たのですが transitinalが多かった気がするのですが・・。 勉強不足ですみません。
お礼
ありがとうございました。 まだまだ勉強不足の私です。 勉強になりました。 テーブルの方はまだ解決策が見つからずです。 なんとか修正しようと思います。