ie width パーセント 効かない 10

0 / クリップ IEやFirefoxでtableの横幅が効かないバグ thやtdにwidthの指定をしているけど指定通りにならないバグがあります。 これはブラウザのtable横幅自動調整機能が邪魔をしているようです。 tableにcssをコピペで解消します！ 下記cssをコピペしてみて下さい。 cssにコピペ [crayon-5fae9e129f256885383416/] これ … bŠÇ—lbƒTƒCƒg‰{——•û–@bƒvƒ‰ƒCƒoƒV[ƒ|ƒŠƒV[b’˜ìŒ /–Ɛӎ–€b. 投稿 2020/01/23 15:24 2 / クリップ 親要素の横幅(width)に対する割合をあらわす。 最近流行りのレスポンシブウェブデザインでは、widthをパーセント指定で表記することが多い(画面サイズと横幅の比率を同じにするため)。 他のスタイル等が影響を及ぼして何か悪さしてるとかないですか？, HTML上にはmax-wrapperというクラスはありますが、 1. justify-content: space-aroundで横並びにした画像がレスポンシブに縮小され... 回答 理由が分からなく困っております 詳しい方ご教示ください, teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。, 評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。, 上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。, 回答が付いた質問の編集は慎重に行ってください。回答でタイプミスについての指摘がある場合は「直したこと」がわかるようにしてください。, ご指摘頂きありがとうございます！タイプミスを直した旨、記載させて頂きましたm(__)m, 掲載されているコードを丸コピーして確認してみましたけど、 これは、画像のwidth、max-widthを指定してない時の表示と同じ感じでした。 IE 11 inline-block が中の要素の max-width: 100% が効かず親要素のwidth指定を無視してしまうっぽい See the Pen max-width not working on IE11 by Minoru Hayakawa (@e-river) on CodePen. コーディングをしていて IE で崩れていると連絡を受けてしまいました。 普通に.maps-wrapperは70%で表示されてるようですよ？ （width:1920pxで作るのはあまり聞かないですね。 仮に1920pxのモニターサイズを想定したとしてもwidth:100%で事足りると思います。 投稿 2020/01/23 16:22 一応下記にIE11で見た場合のキャプチャも掲載しておきます。, IE11でmax-width: 100%;が効かない場合、display: table-cell;が指定されている場合には、table-layout: fixed;をさらに親要素に指定するとmax-width: 100%;が効くようになります。. 0, 回答 アイカツ！が好きです。人生の大切なことはアニメから学んだ。, kikiki-kikiさんは、はてなブログを使っています。あなたもはてなブログをはじめてみませんか？, Powered by Hatena Blog マイクロソフトを信じたのが間違いだった... inline-blockで横並びにした要素内の画像が親要素の幅を無視して表示されてしまっていた。, このようにwidthが200pxに指定された要素の中に、inline-block要素が入り、その中に200pxより大きな300px幅の画像が入るような構成の場合、Chrome, Safari, Firefoxではmax-widthが効き囲っている要素のwidthに画像が縮小されますがが、IE11はボックスは200pxのまま、inline-blockは画像幅の300pxになり親要素を突き破ってしまいます。, これは、画像のwidth、max-widthを指定してない時の表示と同じ感じでした。, どうやらIE11ではmax-widthが指定された要素の親にinline-blockが指定されている時、親であるinline-block要素にwidthの指定がないと、例えinline-block要素の親要素にwidthが指定されていてもmax-widthが効かずこの幅を無視して突き破ってしまう問題があるようです。, 例えばレスポンシブなものとかで画像が拡大されてしまってもOKなら画像の max-width:100% を width:100% に変更するのが簡単です。, 表示幅が決まっているなら画像の親のinline-block要素にwidthの指定をするのが簡単です。, 画像を囲っている要素の display: inline-block を display: block、display: inline にした場合も画像のmax-widthは親の親要素の指定に準拠して表示されました, ちょっと横幅があるので、CODEPNのサイトで見たほうが見やすいかも。 1, 【募集】 見る. width: 100%; 何のことでもない、ただwidthを100%にしている例。主にwrapperやcontainer等、ベースの部分に良くあります。 しかしながら、こちらはただ単にベースに100%をやってるだけで、内部要素にはちゃんとwidth値を指定するでしょう。 tableでwidthを指定しても幅が固定されない場合の対処法; tableでwidthを指定しても幅が固定されない場合の対処法. 1 / クリップ 上のコメントでbodyにwidth:100%;を設定する、とありますが、 tableの諸要素（thやtdなど）の幅をwidthで指定した際、IEなどで表示すると、上手く幅指定が出来ていない場合があります。そういった場合の対処法についてご紹介します。, 上記のソースのように、table-layoutプロパティにfixedを指定することで、tableの列幅を固定レイアウト化し、幅を自由に設定することが出来ます。fixedを指定してセルごとの幅を指定しない場合には、全体の横幅からそれぞれ均等に、セルへと幅が振り分けられることになります。, もしtableの諸要素にwidthを指定しても幅が変わらない場合は、こちらの対処法を試してみてください。, HTMLコーダーからフロントエンドエンジニアにステップするために必要な知識と技術を解説。 ・編集 2020/01/25 23:18, 背景画像の横幅をwidthで指定したいのですが、widthが効きません。わかる方いたらよろしくお願いします。, teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。, 評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。, 上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。, 質問は編集できますので適宜ご対応ください。 例：width:80%; 参考：width – CSS | MDN. 0, 回答 table-layout: fixed;を指定する 2 / クリップ 投稿 2018/06/25 17:27 0, 【募集】 他のブラウザやIE8でも動いているのに、IE11だけimg要素にmax-width: 100%;が効かない場合がありました。その時の対処法です。 今回遭遇したimg要素にmax-width: 100%;が効かなかったのは、img要素の親要素に display: table-cell;が指定されているケースでした。. ・mainbのwidth:1920px; →max-width:100%; （width:1920pxで作るのはあまり聞かないですね。仮に1920pxのモニターサイズを想定したとしてもwidth:100%で事足りると思います。）, 回答 1 / クリップ ‚à‚Á‚ƍª–{“I‚È–â‘è‚È‚Ì‚©‚à’m‚ê‚Ü‚¹‚ñB. teratailを一緒に作りたいエンジニア, bodyにwidth:100%;をつけたら子要素のwidth:70%;が効いたということは、, すいませんmaps-wrapperと記述してたんですがタイプミスしてしまいました, アドバイスに留まらず良記事のご紹介までわざわざありがとうございます。独学で勉強しておりまして、Kosuke_Shibuyaさんの様な偉大な先人に御指導頂けて本当にありがたいです。勉強するに当たって他に良書等ございましたらご教示頂けないでしょうか？一応一通り基本の書籍に目を通したつもりなのですが、なかなかこういった実践的な事には触れられていないと思いまして・・・, 自分が学び始めたことの書籍なんてもう販売されてないです。かといって必要でもないので今の書籍は知りません。申し訳ない。, https://saruwakakun.com/html-css/basic/width-height#section3. 1, 回答 ※文章にすると冷たく感じるだけで本当に怒ってる人はいませんよ. 10.textarea の cols と rows がブラウザにより異なる表示する問題 cols ( 横幅 ) と rows ( 縦幅 ) だけの指定では、Internet Explorer と Firefox で大きくサイズが異なってしまいます。これを対処しないと、場合によってはホームページ全体が崩れる可能性があるでしょう。 更新日：2015年9月20日. それが勘違いだったりとか、あるいは掲載されているコード以外にも何かあって、 100%として認識して自身の幅を算出するようになってます。, Chromeコンソールでwidthが反映されてないようだとありますが、 1 / クリップ 最初 max-width が効かなくなってるって事に気づかなくて時間がかかってしまった。。。 現場で求められる人材となるためには、何を知っていて、何ができなければいけないのか。 その設定はしなくてもbody直下のブロックレベル要素はちゃんと親要素であるbodyの幅を tableの各セルのwidthを指定するも効かない場合のCSS. ツイート. 例えば求める要素の幅が20px、親要素のコンテンツ幅が200pxの場合は、10%となります。 また、ここで言うコンテンツ幅とはmargin、padding、borderを含まない幅です。 同様に高さを%で指定する場合は、 求める要素の高さ÷親要素のコンテンツの高さ×100%. | Copyright © 2018 MB-Support ƒpƒ\ƒRƒ“‰SŽÒ‚̃Tƒ|[ƒgƒy[ƒW All Rights Reserved. Я чайка! ブログを報告する, IEバグ inline-block 内の要素に max-width が効かないにハマる, https://codepen.io/chaika-design/pen/gRjQqo, Mac OS Catalina ターミナルで SSH 接続しようとしたら毎回パスフレーズをきかれるようになった, JavaScript margin 含めた width / height を取得したい, JavaScript parseInt, paeseFloat が NaN になるとき 0 を返したい, webpack css-loader と style-loader の違いについて学んだ, React create-react-app で作ったアプリの bundle サイズを確認したい. 0, cssで、background-attachment:fixed;にしてスクロールするとガタつきます, 回答 Web制作の最先端にいるクロノドライブだからこそ教えられるノウハウが満載です。. 他のスタイルの影響を分析してみないとちょっとはっきりしたことは言えませんね。。 試しにbootstrap使わずに、素のHTMLとCSSだけ掲載されているコードを書いて 表示確認してみてください。bodyにwidth: 100%;つけなくても、直下のdivのwidthは 1 / クリップ ビリティなどのWeb制作に関する事を紹介するブログ, 他のブラウザやIE8でも動いているのに、IE11だけimg要素にmax-width: 100%;が効かない場合がありました。その時の対処法です。, 今回遭遇したimg要素にmax-width: 100%;が効かなかったのは、img要素の親要素に display: table-cell;が指定されているケースでした。, max-width: 100%;を効くようにするためには、display: table-cell;が指定されている親要素はだいたいdisplay: table;だと思います。その要素にtable-layout: fixed;を指定するとmax-width: 100%;を効くようになります。, 下記にtable-layout: fixed;を指定していない場合と指定している場合の例2つを掲載しています。IE11のみ再現しますので、IE11で確認してみてください。ひとつめの画像がmax-width: 100%;が効いていないのが分かります。. 未だにIE使ってる人なんているのかなぁ...？ マイクロソフトのブラウザを使うのは今すぐやめるんだ!! XeoryBaseにテーマを変えて、IEで表示チェックしてないことに気がつきました。「普通に表示されてるだろう」と思っていたら、何とIEではCSSが適用されていない状態でした。今回は、何故か特定のブラウザだけCSSが適用されていなかった要因と解決した方法を紹介します。 HTML5、CSS3上でGoogle mapの埋め込みを中央寄せかつ、縦横比を固定してレスポンシブ対... googlemapで表示している地図全体をグレースケールにして、位置情報ピンのみ色を付けたい。, 回答 ・編集 2018/06/25 18:02, googlemapを埋め込んで横幅をまとめてウィンドウの70%にしようと思い、cssに.maps-wrapper{ Copyright © ChronoDrive Inc All rights reserved. maps-wrapperというクラスが記述されていません。. teratailを一緒に作りたいエンジニア, ＞横幅を大体画面の75％ぐらいに表紙させたい場合はwidth: 75%で良いのでしょうか、、, "width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no". tableの全体の幅は簡単に指定することが出来ますが、各セルの幅を指定しようとするとあっさり上手くいく時と、いかない時ってありませんか？ 2010年10月26日. 無職のデザイナーが描いています。 【比較】覚えておきたいロールオーバー画像切替え 5つの手法（CSS？JS？onmouseover？）, InstagramAPIの廃止とYouTubeのIE11のサポート終了における注意点, SSL化ってなに？有料SSL証明書と無料SSL証明書の違いは？ひよっこエンジニアがまとめてみた. .maps-wrapper { width: 70%; } .maps { position:relative; width: 100%; padding-top: 75%; height: 0; overflow:hidden; margin: 0 auto; } .maps iframe { position:absolute; top: … IE11のサポートしてたのですが、まぁ流石にもうIEでも大丈夫だろうと思ってたら、まさかIE6時代のようにバグに遭遇してしまいました。 See the Pen IE11 inline-block bug test by KIKIKI (@chaika-design) on CodePen. ・bodyのbackgroundの;（セミコロン）忘れ https://codepen.io/chaika-design/pen/gRjQqo. B width:70%;}と書き、google chrome のコンソールで見てみたのですが、widthが反映されないようです