IE10でbox-sizingの書き方についての質問
- IE10でbox-sizing:border-boxが効かない問題について相談です。
- HTMLのソースコードにbox-sizing:border-boxを設定しているのですが、IE10では正常に動作しないようです。
- 他のブラウザではbox-sizingが効いているのに、IE10では隙間が表示されません。どのように書き方をすれば解決できるでしょうか。
- ベストアンサー
IE10でのbox-sizingの書き方
IE10で、box-sizing:border-boxが効かなくて困ってます。 例えば、以下のようなソースのhtmlを書いた場合です。 <!DOCTYPE html> <html> <head> <style type="text/css"> *{ margin: 0px; } html, body{ height: 100%; width:100%; } #container{ padding-bottom: 24px; height: 100%; width: 100%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; } #box{ height:100%; width:100%; background-color: blue; } </style> </head> <body> <div id="container"> <div id="box"> </div> </div> </body> </html> 以上のように書くと、chromeやSafariでは、blueの#boxの下側に24pxの隙間ができて、border-boxが効いているのがわかるのですが、IE10では、隙間が出来ません。 いろいろボックスの位置とか変えて試しましたが、IE10でbox-sizingが効くことがない様子だったので、根本的にbox-sizingの書き方が間違ってるのか、他に何か大事な設定が抜けているのか、それとも仕様変更があったのか、わからないのです。 ネットで調べても、それらしい答えは見当たりませんでした。 どなたか、ご教授願います。
- Akirain
- お礼率100% (3/3)
- CSS
- 回答数1
- ありがとう数6
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
#boxにもborder-box付けてあげると良いと思う。 height:100%;は親継承だから、 #containerのborder-boxした100%を継承して、そこを100%としているので、 #boxにもbox-sizing:border-box;付けたらそれが100%になるかと。 ごめんなさい、説明できそうにないので、 騙されたと思って付けてみてください。（笑）
関連するQ&A
- floatがうまくいきません。
以下のスタイルシートに設定したのですが、 #content の幅をぴったしの値 width: 640px; にするとレイアウトが崩れてしまいます。 どこが間違っているのでしょうか。 また、参考になるページがあれば教えてください。 <body> <div id="wrapper"> <div id="header"> </div> <div id="pagebody"> <div id="navigation"> </div> <div id="content"> </div> </div> <div id="footer"> </div> </div> </body> body { margin: 0; padding: 0; } #wrapper { width: 760px; border-style: solid; border-color: red; border-width: 5px; } #header { width: 750px; height: 85px; border-style: solid; border-color: blue; border-width: 5px; } #pagebody { width: 750px; height: 500px; border-style: solid; border-color: orange; border-width: 5px; } #navigation{ width: 90px; height: 490px; border-style: solid; border-color: green; border-width: 5px; float: left; } #content{ width: 636px; height: 490px; border-style: solid; border-color: yellow; border-width: 5px; } #footer{ width: 750px; height: 30px; border-style: solid; border-color: bluck; border-width: 5px; }
- 締切済み
- CSS
- objectタグを使って背景を透明にしたいのですが
objectタグを使ってindex.html内にmenu.htmlを表示させたのですが、呼び出したmenu.htmlの背景が白くなってしまいました。 個人的には重なっても背景を透明にし、index.htmlが見えるようにしたいと考えています。 対応策はあるでしょうか？お願いします。 【index.html】 <style> div#container { background: url(bg_container.jpg); } </style> </head> <body> <div id="container"> <object type="text/html" data="menu.html" width="200px" height="570px"></object> </div> </body> 【menu.html】 <style> body{ margin: 0; padding: 0; overflow: hidden; border: none; } div#menu_in { width: 200px; height: 570px; } </style> </head> <body> <div id="menu_in"> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> </ul> </div> </body>
- 締切済み
- HTML
- このcssをIEで見ると？
お世話になります。 下記のように書くと、div#bの左からのマージンがIEで見ると、なぜか倍の20pxになってしまいます。FirefoxやOperaはちゃんと表示されるのですが、原因はなぜなんでしょうか？ ご存知の方、よろしくお願いします。 <html> <head> <style type="text/css"> <!-- div#a { width:748; height:200px; background-color:#cccccc; } div#b { margin-left:10px; float:left; width:354px; height:100px; background-color:red; } div#c { float:left; margin-left:20px; width:354px; height:100px; background-color:#0000ff; } --> </style> </head> <body> <div id="a"> <div id="b">b</div> <div id="c">c</div> </div> </body> </html>
- ベストアンサー
- HTML
- [CSS] 常にフッターは下部に表示 IE7
常にフッターは下部にくるように下記のスタイルとhtmlを使用しております。 内容が少ない場合でも、下記のように常に画面一番下にくるようになっております。 ---------------------------- 内容 ---------------------------- フッター部 ---------------------------- 【HTML側】 <body> <div id="container"> <div id="main"><p>内容</p></div> <div id="footer">Copyright</div> </div> </body> 【CSS】 body,html{height:100%;} #container {border:1px #000 solid; width: 900px; margin: 0px auto;position: relative;height: 100%;min-height: 100%;} body > #container {height: auto;} #main {background:#f00;padding-bottom: 100px;} #footer {background:#ff0; position: absolute; bottom: 0px;left:0px; height: 100px; width: 100%;} IE9などですと、最初に画面を開いて一番下にいたフッターが、 画面サイズを広げると一緒にくっついて一番したのままでいるのですが、 IE７で見ると、最初に開いた画面では一番下にいるのに、画面を広げると その場所のままです。更新をかけると一番下に移動するのですが、 これはIE7では無理なのでしょうか？ 広げたら一緒にフッター部がくっついていってほしいのですが、わかる方が いらっしゃいましたら、ご教授お願いいたします。
- ベストアンサー
- CSS
- Firefoxでheight:100%がきかない？
ソースは以下のとおりです。 IEでは#container内のDIV要素は全てheight:100%で表示されるのですが、Firefoxでは、高さ：100％がききません。 Firefoxでもページの下まで表示されるようにしたいと思います。 よろしくお願いいたします。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> <meta http-equiv="Content-type" content="text/html; charset=UTF-8" /> <title>サンプル</title> <style type="text/css"> <!-- /*全体の設定*/ * { margin: 0px; padding: 0px; font-size: 12px; font-family:"ＭＳ Ｐゴシック", Osaka, "ヒラギノ角ゴ Pro W3"; font-weight: normal; line-height: 150%; color: #000; } /*ページ全体の設定*/ html,body { height:100%; } body { background-color: #FFF; } /*カラムの設定・IE6のハック*/ #wrapper { width: 1000px; float:left; height: 100%; min-height:100%; margin: 0px 0px 0px 0px; overflow:hidden; _overflow: show; background-color:#FF0000; } body > #wrapper { height:auto; } /*ヘッダの設定*/ #header { width: 1000px; height: 123px; clear: both; } /*メインコンテンツの設定*/ #container { width: 1000px; clear: both; height: 100%; min-height:100%; margin: 0px 0px 0px 0px; overflow:hidden; _overflow: show; background-color:#00FF00; } /*左カラム外側（2カラム内包）*/ #container_left01 { width: 732px; float:left; height: 100%; min-height:100%; margin: 0px 0px 0px 0px; overflow:hidden; _overflow: show; } /*左カラム（左側）*/ #container_left02 { width: 268px; float:left; height: 100%; min-height:100%; margin: 0px 0px 0px 0px; overflow:hidden; _overflow: show; } /*左カラム（右側）*/ #container_left03 { width: 463px; float: right; border-left-width: 1px; border-left-style: solid; border-left-color: #000000; height: 100%; min-height: 100%; margin: 0px 0px 0px 0px; overflow:hidden; _overflow: show; background-color:#FFFF00; } /*右カラム*/ #container_right01 { width: 267px; float:left; border-left-width: 1px; border-left-style: solid; border-left-color: #000000; height: 100%; min-height:100%; margin: 0px 0px 0px 0px; overflow:hidden; _overflow: show; } --> </style> </head> <body> <div id="wrapper"> <div id="header"> <h1>あああ</h1> </div> <div id="container"> <div id="container_left01"> <div id="container_left02">あああ</div> <div id="container_left03">あああ</div> </div> <div id="container_right01">あああ</div> </div> </div> </body> </html>
- 締切済み
- HTML
- 特殊なカラムのデザイン設定について
いつもお世話になっております。閲覧ありがとうございます。 実は新しいことに挑戦して自己解決できず、宜しければお知恵をお借り頂ければと思います。 どのようなことかと言うと １．左カラムのheight部分を100％表示して、position:fixedを使って位置固定とスクロールしないメニュー画面を作りたい。 ２．左カラムにマウスを乗せるとカラムが右に若干スライドするようにしたい。スライド時、右カラムも左カラムが動いた分、スライドします。 以上のようなWEBサイトを作りたいのですが・・・項目１の部分で躓いてしまいました。 実は左カラムの部分に右カラムが隠れてしまっています。 解決策として左カラムの背面にボックスを作って解決しようとしましたが、別の問題が発生しました。 ブラウザのサイズを狭めてスクロールさせると右カラムが左カラムに隠れてしまいます。 どなたか解決案を頂けませんでしょうか。 お手数おかけ致しますが、何卒ご教授お願い致します。 【HTML】 <body> <div id="MasterColumn"> <!--<div id="LeftColumu_z1"></div>--> <div id="LeftColumu_z2"> <ol> <li>コンテンツ１</li> <li>コンテンツ２</li> <li>コンテンツ３</li><!-- サブコンテンツ１ --> <li>コンテンツ４</li><!-- サブコンテンツ２ --> </ol> </div> <header> <div id="LeftHeader"> <h1>タイトル</h1> </div> <div id="RightHeader"> <ol> <li>１</li> <li>２</li> <li>３</li><!-- サブコンテンツ１ --> <li>４</li><!-- サブコンテンツ２ --> </ol> </div> </header> <div id="RightColumu"> <h2>コンテンツ２</h2> <h3>コンテンツ３</h3> <h4>コンテンツ４</h4> </div> <footer>フッダー</footer> </div> </body> 【CSS部分】 body{ background-color: #FFE9E7; background-image: none; background-position: top left; background-attachment: fixed; font-family: "メイリオ", Meiryo, Verdana, Helvetica, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "ＭＳ Ｐゴシック", sans-serif; /* フォントを設定 */ color: #333; margin: 0; padding: 0; line-height: 1.5; } #MasterColumn{ width: 1200px; margin-left: auto; margin-right: auto; } #LeftColumu_z1 { float:left; width: 200px; height: 100%; background-color: #FFFFFF; z-index: 1; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } #LeftColumu_z2{ float:left; position: fixed; width: 200px; height: 100%; background-color: #2C2B30; z-index: 2; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } header{ float: left; width: 1000px; height: 80px; line-height: 80px; text-align: center; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } #LeftHeader{ float: left; height: 80px; width: 700px; background-color: #FFFFFF; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } #RightHeader{ float: left; width: 300px; height: 80px; background-color: #920832; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } header h1{ display: inline; } header ol,li{ display: inline; } #RightColumu { float: left; width: 1000px; height: 1000px; border: dashed 1px #999; margin: 0; padding-left: 20px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } footer { float: left; width: 1200px; background-color: #2C2B30; color: #FFFFFF; text-align: center; }
- 締切済み
- CSS
- CSS：floatを使っての段組で困っています
図のような段組をしたいのですが、ソースはあっているでしょうか？ サイトを作成しているとズレたりするので、根本的な段組が間違っているのか見て頂けると助かります。 ■HTML <body> <div id="container"> <div id="box-2">box-2</div> <div id="box-3">box-3</div> <div id="box-4">box-4</div> <div id="box-5">box-5</div> <div id="box-6">box-6</div> <div id="box-7">box-7</div> <div id="box-8">box-8</div> </div> </body> ■CSS body { margin: 0 auto 0 auto; padding: 0px; height:100%; } #container { width: 800px; } #box-2 { float: left; width: 800px; height: 30px; } #box-3 { float: left; width: 400px; height: 300px; } #box-4 { float: left; width: 400px; height: 300px; } #box-567 { clear:left; float: left; width: 800px; } #box-5 { float: left; width: 300px; height: 200px; } #box-6 { float: left; width: 300px; height: 200px; } #box-7 { float: left; width: 200px; height: 200px; } #box-8 { clear:left; width: 800px; }
- ベストアンサー
- HTML
- Safariでheight:100%のボックスを表示したいのです
Safariでheight:100%のボックスを表示したいのです。MacIE・WinIE・FireFox・Operaでは出来たのですが、どうしてもSafariだけheight:100%のボックスが出来上がらず・・・。 以下、記述したCSSとHTMLです。 HTML--------- <body> <div id="main"> <h1>height100%のボックス</h1> <p> 標準準拠のIEやfirefoxでbody直下にheight100%のボックス </p> ・・・略 <h1>height100%のボックス</h1> <p> 標準準拠のIEやfirefoxでbody直下にheight100%のボックス </p> ・・・略 </div> </body> </html> CSS--- /* \*/ html{ height:100%; } /* \*/ body{ height:100%; width:80%; margin:0px auto; padding:0px; } div#main{ background-image:url(../images/contents_bg.gif); border:solid 1px #760014; border-width:0px 1px; height:100%; min-height: 100%; margin:0px auto; padding:0px; border:1px solid #ff0000; } body > #main{ height: auto; } h1{ margin:0px auto; padding:0
- ベストアンサー
- HTML
- CSSのボックスの配置他について
<head> <title>Webサイト</title> <style type="text/css"> <!-- #example { /* 親ボックス */ width: 750px; height: 900px; background-color: #FFEAEF; position: absolute; top: 50px; left: 100px; } { top: 50px; left: 150px; background-color: #FFEAEF } #boxL { /* ボックス左 */ width: 150px; height: 600px; background-color: #ffffff; position: absolute; top: 150px; left: 1px; } #boxR { /* ボックス右 */ width: 599px; height: 600px; background-color: #ffffff; position: absolute; top: 150px; left: 150px; } --> </style> </head> <body> <div id="example"> <div id="example1"><h1>ボックス1</h1></div> <div id="boxL">ボックス左</div> <div id="boxR">ボックス右</div> </div> </body> </html> とタグを打ちこみました。下の部分に文字を書きたいのですがどうすればいいですか？あと、<div id="boxL">ボックス左</div>の所は、普通のHTMLタグを使っても問題ないでしょうか？
- ベストアンサー
- その他（プログラミング・開発）
- 100%ボックス・フッタ固定、IE6だけ左寄り…
いつもお世話になっています。 画像のような構成で、100%ボックスの下にフッターを付けたページ なのですが、IE6だと左寄せになってしまいます。 いろんなCSS解説のHPを渡り歩いてみたのですが、どこが悪いのか 分からず。 どうぞよろしくお願いします。 /*100%ボックスとフッター画面の下固定のためのCSS-------------*/ html{ height: 100%; } body{ background-image: url(../common/bg.gif); height: 100%; text-align: center;/*ie6 centering*/ } * html div#container{ height: 100%; } div#container{ width: 800px; margin: 0 auto; background-color: #FFFFFF; position: relative; min-height: 100%; text-align: left;/*ie6 centering*/ } body > #container { height: auto; } div#main{ padding: 0 0 60px 0; } div#main:after { content: ""; display: block; clear: both; height: 1px; overflow: hidden; } /*\*/ * html #container { height: 1em; overflow: visible; } /**/ /*フッター---------------------------------------*/ #footer{ clear:both; background-color:#4682B4; position:absolute; bottom:0px; height:30px; width:100%; text-align:center; line-height:30px; font-size:80%; color:#FFFFFF; }
- ベストアンサー
- HTML
お礼
ありがとうございます！ できました！ 説明は全然大丈夫です！（今のところ） 質問してみてよかったです。本当に助かりました。 ありがとうございました。 m(_ _)m