IEのレイアウト崩れについて　助けてください

2014/05/24 13:42

このQ&Aのポイント

IEのみ配置が異なる検索フォームのレイアウト崩れに困っています。CSSを変更しても他のブラウザのように表示されません。
IE11でのハック方法がわからず、助言が欲しいです。
検索フォームのレイアウト崩れは.search_inputのheightを広くすると発生します。解決方法を教えてください。

IEのレイアウト崩れについて　助けてください

いつもお世話になっております。実はブログを作成していて一部、IEのみ配置が違っている部分（検索フォーム部分のみ）がございました。どのようにCSSを変更しても他ブラウザのように表示されず困っております。そこでIEハックをして修正しようと思いました。 IE11でのハック方法が分からず、どなたかご教示頂けませんでしょうか。また、CSSなど修正可能な方がいらっしゃいましたら助言頂けると嬉しいです。【HTML】  <div id="contents"> <a href="#" title="トップページ"><div class="btn">Home</div></a> <a href="#" title="当サイトについて"><div class="btn">about</div></a> <a href="#" title="写真・画像置き場"><div class="btn">Photo</div></a> <a href="#" title="ツイッター - Twitter -"><div class="btn">Twitter</div></a> <a href="#" title="お問い合わせ"><div class="btn">Mail</div></a>  <div class="search" align="right"> <form action="./" method="get" >サイト内検索 <input class="search_input" type="text" name="q" maxlength="200" value="<%search_word>"> <input class="search_btn" type="image" src="pngファイル(15px*14px)"> </form> </div> </div> 【CSS】 /***** ボタン部分 *****/ #contents{ width: 1200px; height: 35px; margin-bottom: 25px; } .btn{ float: left; width: 100px; height: 33px; padding-left: 20px; padding-right: 20px; border: 1px solid #15aeec; background-color: #49c0f0; background-image: -webkit-linear-gradient(top, #49c0f0, #2cafe3); background-image: linear-gradient(to bottom, #49c0f0, #2cafe3); color: #fff; -webkit-transition: none; transition: none; text-shadow: 0 1px 1px rgba(0, 0, 0, .3); line-height: 33px; } /* マウスオーバー */ .btn:hover{ border:1px solid #1090c3; background-color: #1ab0ec; background-image: -webkit-linear-gradient(top, #1ab0ec, #1a92c2); background-image: linear-gradient(to bottom, #1ab0ec, #1a92c2); } /* クリック */ .btn:active { background: #1a92c2; box-shadow: inset 0 3px 5px rgba(0, 0, 0, .2); color: #1679a1; text-shadow: 0 1px 1px rgba(255, 255, 255, .5); } /***** 検索部分 *****/ .search{ /*float: left;*/ height: 33px; margin-left: auto; border: 1px solid #15aeec; background-color: #49c0f0; color: #fff; -webkit-transition: none; transition: none; text-shadow: 0 1px 1px rgba(0, 0, 0, .3); line-height: 33px; } .search_input{ width: 220px; padding: 5px 35px 5px 6px; border:1px solid #333; } /* 可能であれば:root .search_btnを共通で使用したいです */ :root .search_btn{ position: relative; top: 3px; left:-30px; } /* まだIE10の配置修正はしていません */ @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { .search_btn{ position: relative; top: 0px; left:-30px; } } 動きを確認したところ .search_inputのheightをデフォルトより広くとるとIEのレイアウトのみ崩れるようになりました。何卒、ご返事よろしくお願い致します。

webyou
お礼率43% (7/16)

CSS
回答数1
ありがとう数2

みんなの回答 （1）
専門家の回答

質問者が選んだベストアンサー

ベストアンサー

ORUKA1951
ベストアンサー率45% (5062/11036)

2014/05/24 15:58 回答No.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>

質問者

お礼 2014/05/24 20:49

なるほど・・・ありがとうございます。 HTML部分ですがブログのテンプレートをそのまま引用してクラスを追加したのみです。しかしIE11含めてIEのみ形が崩れるのは直りませんでした。形が崩れている部分ですが、pngファイルとサイト内検索部分のみで他は上手く表示されているんですよね。原因は.search_input　paddingの縦ラインの調整部分で不具合が起きているということは確認できています。

質問者

補足 2014/05/24 23:45

問題の部分を各自別のボックスにセットしてレイアウト崩れを回避することができました。原因はやはり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> 無事にレイアウトを完成することができました。ありがとうございました。

ログインすると、全ての回答が全文表示されます。