- ベストアンサー
IEのレイアウト崩れについて 助けてください
- IEのみ配置が異なる検索フォームのレイアウト崩れに困っています。CSSを変更しても他のブラウザのように表示されません。
- IE11でのハック方法がわからず、助言が欲しいです。
- 検索フォームのレイアウト崩れは.search_inputのheightを広くすると発生します。解決方法を教えてください。
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
スタイルシートに取り掛かる前に、HTMLを根本から学びなおす必要があります。 ・・・厳しいですが、そのほうがはるかに早く上達できます。・・・ a要素--行内要素--内にDIVは置けません!! ★今のページをAnother HTML Lint - Gateway( http://www.htmllint.net/html-lint/htmllint.html )でチェックしたらよいです。 ★スタイルシートを使ってデザインする最大の目的は 1) 構造とプレゼンテーションの分離( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/intro/intro.html#h-2.4.1 ) 文書の構造をプレゼンテーションと切り離すことで広汎なプラットフォームや多様なメディアでの文書提供コストを低下でき、文書の改訂も容易になる 2) 豊富なプレゼンテーション スタイルシートでは、行間の設定やインデントの設定、テキスト色や背景色、フォントのサイズとスタイル、その他様々なプロパティの設定が簡単にできる。( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/present/styles.html#h-14.1 ) 上記のリンク先は必ずしっかり読んで理解すること ★DIVの使い方も含めHTMLの基本が出来ていません。 デザインを目的にHTMLが書かれていますが、HTMLは文書構造をマークアップするものです。出生はSGMLです。 『プレーンテキストのみを用いて、「タグ」を使うことによってデータに意味を持たせることが考えられた。( http://ja.wikipedia.org/wiki/SGML#.E8.83.8C.E6.99.AF )』 <h1>は見出し)heading>、<p>は段落(Paragrph)、<li>はリストのアイテム(List Item) それで足りないときにDIVやSPANを使って 『DIV要素とSPAN要素は、id属性及び class属性と併用することで、文書に構造を付加する( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/global.html#h-7.5.4 )』 (ここが理解され難かったためHTML5では新しく構造を示す要素が追加されて、DIVやSPANは原則使わなくなります。) Authors are strongly encouraged to view the div element as an element of last resort, for when no other element is suitable.( http://www.w3.org/TR/2012/CR-html5-20121217/grouping-content.html#the-div-element ) 適切な要素がないときの最後の最後の手段としてdivを使うことを強く推奨する。--とね また、スタイルシートのセレクタも基点となるセレクタを書かれていませんが、本来は書くべきです。 と全般的に基礎が全く出来てない上にCSS3などを積み上げてらっしゃる。それでは崩れ落ちます。 IE11は、他のウェブ標準ブラウザと同じでハックは必要ありません。もしIE11で崩れるならfirefoxやChromeでも崩れるはずです。 標準モードで動作するようにDOCTYPEを記述し、HTML/CSSが正しければIE8以降のブラウザでは崩れはないはず。 HTMLは文書構造しか書きませんから・・こんなシンプルなものでよい。 class名などもデザインではなく文書構造を示すようにする。もちろん無駄なものは書かない。書く必要はない。 <!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"> <!-- --> ＿</style> </head> <body> ＿<div class="header"> ＿＿<h1>タイトル</h1> ＿＿<div class="nav"> ＿＿＿<ol> ＿＿＿＿<li><a href="/" title="トップページ">Home</a></li> ＿＿＿＿<li><a href="/about" title="当サイトについて">about</a></li> ＿＿＿＿<li><a href="/album" title="写真・画像置き場">Photo</a></li> ＿＿＿＿<li><a href="/twiter" title="ツイッター - Twitter -">Twitter</a></li> ＿＿＿＿<li><a href="/contact" title="お問い合わせ">Mail</a></li> ＿＿＿</ol> ＿＿</div> ＿＿<div class="form"> ＿＿＿<form action="./"> ＿＿＿＿<h2>サイト内検索</h2> ＿＿＿＿<p> ＿＿＿＿＿<input type="text" name="q" maxlength="200" value="%search_word"> ＿＿＿＿＿<input type="image" src="pngファイル(15px*14px)"> ＿＿＿＿</p> ＿＿＿</form> ＿＿</div> ＿</div> ＿<div class="section"> ＿＿<h2>見出し</h2> ＿＿<p>本文はsection</p> ＿</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>
お礼
なるほど・・・ありがとうございます。 HTML部分ですがブログのテンプレートをそのまま引用してクラスを追加したのみです。 しかしIE11含めてIEのみ形が崩れるのは直りませんでした。 形が崩れている部分ですが、pngファイルとサイト内検索部分のみで他は上手く表示されているんですよね。 原因は.search_input paddingの縦ラインの調整部分で不具合が起きているということは確認できています。
補足
問題の部分を各自別のボックスにセットしてレイアウト崩れを回避することができました。 原因はやはりHTML部分ではなくCSS部分のテキストボックスのサイズ調整でIEでは全体のレイアウトが崩れていました。 修正に合わせてHTML文も修正しました。 <!-- コンテンツ部分 --> <div id="contents"> <ol> <li class="btn" href="#" title="トップページ">Home</li> <li class="btn" href="#" title="当サイトについて">about</li> <li class="btn" href="#" title="写真・画像置き場">Photo</li> <li class="btn" href="#" title="ツイッター - Twitter -">Twitter</li> <li class="btn" href="#" title="お問い合わせ">Mail</li> <form action="./" method="get" > <li class="leftbox">サイト内検索</li> <li class="search"><input class="search_input" type="text" name="q" maxlength="200" value="<%search_word>"></li> <li class="rightbox"><input class="search_btn" type="image" src="アイコン"></li> </from> </ol> </div> 無事にレイアウトを完成することができました。 ありがとうございました。