IE11でflexboxの縦幅がおかしい時はflexプロパティの書き方が原因かもしれない
公開2015.08.07 更新2017.12.03 仕事・技術 Windows10が発売されて新ブラウザのEdgeが使えるようになっても、まだまだInternetExplorerの呪縛からは逃れられません；； 今回はフロートを使ったレイアウトではなく今後主流になってくる「フレキシブルボックス」でのレイアウトで発生した問題です。 以下のようなコードがあるとします。 <div id="flexParent"> <header>ヘッダー</header> <main> <div class="flexChild left">左</div> <div class="flexChild right">右</div> </main> <footer>フッター</footer> </div> よくあるカタチで、縦並びにヘッダー、メインコンテンツ（左右に２カラムあるとします）、フッターがあります。 これら
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
CSS3 transition, transformを使用時に画像がぼやける | ふたえごのWEBテクニックブログ
馬刺し大好きな管理人がWeb制作で遭遇した バグや回避策などを記録していく日記です。 ご使用の際は自己責任で！！
上下（縦）の中央揃えでtable-cellのvertical-alignが効かない時 | ネッタン
先日、vertical-align：middleが効かずに軽くはまったので、その情報を共有したいと思います。 当初↑の図１のような配置。 修正で図２のように変更になりました。 上下（縦）の中央揃えですから、display:table-cellのvertical-alignを使って修正したのですが、これがなぜかうまく行きません。 ソースをよく確認してみると、floatを使っていることを思い出しました。 display:table-cellのvertical-alignで上下（縦）の中央揃えをする時には、floatは使ってはいけません。 今回、最初は縦の中央揃えの予定ではありませんでしたので、div Aにfloat:left、div Bにfloat:rightを使っていました。 後で修正が入った時にそのことを忘れていてdiv Bにそのままdisplay:table-cellのvertical-
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
