いつもお世話になっております。
実はブログを作成していて一部、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のレイアウトのみ崩れるようになりました。
何卒、ご返事よろしくお願い致します。
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-html4 … )
文書の構造をプレゼンテーションと切り離すことで広汎なプラットフォームや多様なメディアでの文書提供コストを低下でき、文書の改訂も容易になる
2) 豊富なプレゼンテーション
スタイルシートでは、行間の設定やインデントの設定、テキスト色や背景色、フォントのサイズとスタイル、その他様々なプロパティの設定が簡単にできる。( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )
上記のリンク先は必ずしっかり読んで理解すること
★DIVの使い方も含めHTMLの基本が出来ていません。
デザインを目的にHTMLが書かれていますが、HTMLは文書構造をマークアップするものです。出生はSGMLです。
『プレーンテキストのみを用いて、「タグ」を使うことによってデータに意味を持たせることが考えられた。( http://ja.wikipedia.org/wiki/SGML#.E8.83.8C.E6.9 … )』
<h1>は見出し)heading>、<p>は段落(Paragrph)、<li>はリストのアイテム(List Item)
それで足りないときにDIVやSPANを使って
『DIV要素とSPAN要素は、id属性及び class属性と併用することで、文書に構造を付加する( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )』
(ここが理解され難かったため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/grou … )
適切な要素がないときの最後の最後の手段として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部分ではなく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>
無事にレイアウトを完成することができました。
ありがとうございました。
なるほど・・・ありがとうございます。
HTML部分ですがブログのテンプレートをそのまま引用してクラスを追加したのみです。
しかしIE11含めてIEのみ形が崩れるのは直りませんでした。
形が崩れている部分ですが、pngファイルとサイト内検索部分のみで他は上手く表示されているんですよね。
原因は.search_input paddingの縦ラインの調整部分で不具合が起きているということは確認できています。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- JavaScript vertical sliderをautoplayしたい 2 2022/08/25 14:47
- HTML・CSS CSS のみのタブ切り替えについて 1 2023/01/11 16:47
- HTML・CSS ヘッダーの画像にメインエリアがかぶってしまいます 1 2022/11/28 14:06
- HTML・CSS 書籍を見つつサイト造りの練習をしているのですが、見た目が一致しません 2 2022/11/28 15:00
- JavaScript ソースコードのいじる場所が分かりません。 1 2022/12/23 02:06
- HTML・CSS CSSが効かずどのように指定すれば良いか分からないのでアドバイスお願い致します 2 2023/06/07 12:25
- JavaScript jQueryでのドラッグアンドドロップについて 1 2022/07/30 09:10
- HTML・CSS HTML & CSS 縦ボックス内の文字の左右センタリング 3 2023/03/25 04:23
- HTML・CSS アコーディオンメニューが思うように動作しません。 1 2023/08/20 16:48
- HTML・CSS html/cssで要素が出てこなくて困ってます 1 2022/12/31 16:59
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
htmlの文字が縦書きになる
-
CSSでボックスのheightが0になる
-
widthやheightの数値に単位(px...
-
css初心者 フレックスボックス...
-
CSSで3分割した背景画像を配置...
-
Media Queries 4 で 非推奨とな...
-
HTMLのiframeの入れ子について
-
中点「・」の改行について
-
div内に外部のurlを表示させたい
-
CSS上での計算を行うためのルー...
-
W3Cのソースコードの検証サービ...
-
画像リンクの下に文字を付けた...
-
border-style:solidで文字がずれる
-
テキストボックスの高さを可変...
-
CSSと<dl><dd>で間隔をあけて1...
-
<li>の黒い点を消したい。
-
【CSS】ヘッダーの高さが不明の...
-
CSSでborderの指定を解除する記...
-
CSSだけで、テーブルにスクロー...
-
divで囲まれたpaddingの指定を...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
htmlの文字が縦書きになる
-
widthやheightの数値に単位(px...
-
css初心者 フレックスボックス...
-
form input テキストを上下中央...
-
<div>と<div>の間の10px程の...
-
CSSがなぜかfont-sizeだけ効か...
-
divで囲まれたpaddingの指定を...
-
表示倍率を変えるとレイアウト...
-
画像イメージの上下左右、欲し...
-
CSS、width100%でもできる余白
-
cssで中央寄せ
-
CSS:animation開始位置の設定
-
スクロールボックスを中央に配...
-
CSSで背景画像を一番下にもって...
-
【CSS】ヘッダーの高さが不明の...
-
初心者html・CSS ウィンドウを...
-
footer を横幅いっぱいに広げる...
-
CSSで指定した背景画像にリンク...
-
div領域をウインドウサイズに合...
-
W3Cのソースコードの検証サービ...
おすすめ情報