IE11で「flexbox」「min-height」「aligin-items: center」の組み合わせが効かない時の対処法
ChromeとEdgeでは意図通りに動く。でも、IE11だけ動かない・・・ そんなバグがあって四苦八苦したので対処法をメモ。 どうにかして「Chrome」「Edge」「IE11」の動作を同一にすることが出来ました。 やりたいこと こんな感じ。 div要素の中に文字を均等に真ん中に配置したい。 その時の記述がこんな感じ。 <div class="parent"> <span class="child"> test </span> </div> .parent { display: flex; align-items: center; width: 100%; background-color: green; min-height: 90px; } .child { } flexboxのalign-items: centerで、 高さ指定した親のdiv要素に対してspan要素を中央寄せしていま
IE11の定番バグとその対応方法 | キオミルブログ
こんにちは。キオミル株式会社フロントエンドエンジニアの野勢です。IEへの対応はコーディングの中で最も苦戦する業務の一つだと思います。 私は基本的にコーディングの際、Google Chromeでプレビューをしています。そのため、制作段階でIE11のレイアウトの崩れを発見できないことがあります。また、ある程度までコーディングが進行した段階でレイアウトの崩れを発見した場合、どの制作過程で崩れたのか見当がつきません。崩れた段階が分からないと、対処法を検索エンジンで調べたくても、何について検索すればいいのか分からないという状態になってしまいます。 そこで、この記事では、IE11への対応が必要な方のために、そもそもバグを発生させないプロパティを用いてコーディングする方法と、どうしても使用しないといけないプロパティがある場合の対処方法や代用プロパティをご紹介します。 object-fitプロパティは、画
IE11のバグまとめ - Qiita
バージョンごとに進化するIEのバグ 備忘録も兼ねて記事にまとめました。 バグについての解決策と補足も併せて記載してますが、 記事に記載されていない遭遇率高めのバグやより良い解決策などがあれば、是非フィードバックをお願いします。 まとめてみた所感としては、IE6の頃から根本的な部分は変わってない気がします。 （ただし、パフォーマンスが大幅にアップしたのは認める。） IE11はWindows10の場合、2025年までサポートが続きます。 https://support.microsoft.com/ja-jp/lifecycle/search/18165 ﾅﾝﾃ／(^o^)＼＼(^o^)／／(^o^)＼＼(^o^)／／(^o^)＼ｺｯﾀｲ もうね...アボカドまるごとバナナかと。 ちなみに今年の4月でVistaがサポート終了するので、1ヶ月後にはIE9を窓から放り投げてOKです。 https:/
SVGのtransform-originにハマった話（IE,safari,マルチブラウザ対応）
こんばんは。コーダーのシマです。 先日たずさわった案件で、SVGにcssアニメーションを付けました。 私、普段のメインブラウザChromeなのですが、いざ実装して確認してみると、 IE/edgeで。。。transformが効いてない！ safari(9)で。。。なんかずれてる！ という悲しい事態に。 というわけで、備忘録兼ねて、実装時のTIPSを共有したいと思います。 準備 まずはSVGの素材を用意しましょう。 今回はICOON MONOさんより、エビの素材をお借りしました。 （初期表示がナナメになっているのでサンプルとしては不向きだったなと、書きながら気づきました。爆） .svg形式でDLしたら、イラレで開きましょう。（私のMacのイラレが古いのはスルーしてください） ナナメだとわかりづらいので、回転させて上を向かせちゃいましょう。（←） 動かす分の余白を考慮して、キャンバスサイズ512
Modernizr（モダナイザー）とは - Qiita
1. Modernizr（モダナイザー）とは JavaScriptやCSSを書いていると「新しい機能が使えるブラウザではそれを使い、そうでない場合は別の手段で代替する」というように、処理を分岐させたい場合がある。 Modernizr（モダナイザー）とは、そういった「機能検出」のためのJavaScriptライブラリ。 このライブラリを使用すると、各ブラウザが特定の機能をサポートしているかどうかを判定し、その結果によって条件を分岐させることができる。 2. どうやって使うのか Modernizr（モダナイザー）のソースコードは、Modernizr公式サイトから必要な機能に絞ってダウンロードできる。 2-1. JavaScriptの場合 例えば、JavaScriptのタッチイベントが使えるか否かを知りたい場合は、公式ダウンロードページで「Touch Events」の項目にチェックを入れてファイル
flexboxのバグに立ち向かう（flexboxバグまとめ） - Qiita
注）本文中の「コンテナ」「アイテム」について 本文中でいう「コンテナ」「アイテム」は、flexコンテナとflexアイテムのことを指しています。 コンテナ display: flexや、wrap指定などをする 複数のアイテムを含む アイテム flex: 1 0 0%などの指定をする 1. アイテム潰れる問題（Safari） Chrome Safari 潰れてますね。 起きる条件 Safari なぜ コンテンツの最小サイズを尊重してくれない模様 どうすればいいのか flex-shrinkに0を指定 flex-basisにautoを指定（デフォ値なので、指定がなければそのままでOK） Safari10にて修正済み（つまり、SierraとiOS 10以降では対応不要） 2. align-items:center はみ出す問題 Chrome IE11 はみ出てますね。 起きる条件 IE10-11 f
IEでも大丈夫！CSS Gridを使用する時の注意点と実装方法
CSS Gridはブラウザに2次元のレイアウトを作成できるCSSの素晴らしい機能です。今までの実装方法に比べて、HTMLはより簡単で、CSSはより堅牢に実装することができます。 そんなCSS Gridの唯一の問題点は、ブラウザのサポートでしょう。 2018年4月現在、IE11のサポートが完全とは言えない状況ですが、IEへの対応のポイントをしっかり押さえておけば、CSS Gridでレイアウトを実装することができます。flexboxやfloatをフォールバックとして使用する必要もありません。 CSS Gridを使用する際、IE11にどのように対応させるのか、その注意点と実装方法を紹介します。 CSS Grid Application Layout in Production 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 最初は、C
object-fitをCSSのみでIEにも対応してみる - Qiita
便利過ぎてobject-fitナシではもう組めなくなってきた今日このごろ。 modernizrなどを使わなくてもCSSだけでIE10（IE9もいけるかも？）に対応する方法を知ったので書いておきます。 absoluteにしてtansformを使って画像の真ん中を合わせています。 （transformが使えないブラウザなんてもう知らない。） あくまでレガシー対応で、完全対応ではないですが、デザインによってはこれで十分なケースがあると思うので。 html <span class="media"> <img src="image01.jpg" alt="" /> </span> <span class="media"> <img src="image02.jpg" alt="" /> </span> .media { position: relative; width: 500px; height
2021年度版さよならIE | 京都のWeb制作・ホームページ制作ならブリッジコーポレーション
このサイトでは、アクセス状況の把握や広告配信などのために、Cookie（クッキー）を使用しています。このバナーを閉じるか、閲覧を継続することでCookieの使用に同意するものとします。 詳細はコチラ詳細はコチラ [ 閉じる ] Web制作をしているとIE表示が崩れたり、動作がうまくいかないなどの不具合が起きた経験があると思います。 (僕はめちゃくちゃありました…) そんなIEサポートが終了することが決まりましたね。 と、いうことなのでこのタイミングでWeb制作でのブラウザとOSのサポートについてまとめてみました。 2021年度版 ついに終了‼ IEサポート終了のスケジュール Windows10/8.1 Windows8.1 2023年1月まで Windows10 ※LTSB/LTSC以外の通常版 ブラウザとしてのIE 2022年6月まで Windows10 ※LTSB/LTSC以外の通常版
［html5.js］の導入を辞めました。
［html5.js］とは？ そもそも［html5.js］とは何か？ 一言で説明すると「Internet Explorer 8 以前のブラウザでも HTML5 に対応できるようになるスクリプト」です。 Microsoft が開発している［Internet Explorer］は、そこそこ普及しているにも関わらず、エラーやセキュリティの脆弱性が多く、また最新技術への対応も遅く、特にウェブデザイナーの方たちからは「諸悪の根源」として忌み嫌われている残念なブラウザです。 実際 Internet Explore 9 でようやく HTML5 の新要素がサポートされるようになったものの、下位ヴァージョンの Internet Explorer 8 以前のブラウザで HTML5 で製作したサイトを閲覧すると恐ろしいほどにレイアウトが崩れて表示されてしまいます。 これは、Internet Explorer 8
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
返せ、工数！コーダー泣かせの☓☓☓☓――IE11対応まとめ | yanagi's memo
