#IE11 で #CSS グリッドは難しくない | Sler系SEの技術ブログ
今回、この記事でAutoPrefixerは利用しません。 IE11は[x]でrepeatを指定できます minmax()は、IE11で利用できますが、auto-fitとauto-fillは利用できません。 fit-content()も、IE11で利用できませんが代替の手段があります。 グリッドの列/行にminmax(min-content, max-content)を適用し、子要素にmax-width: [value]を設定します。 IE11以外のブラウザでは、fit-contentの代わりにautoを指定しても同じです。 ちなみに、IE11のautoの動きは他のブラウザと異なります。 IE11で他のブラウザのautoを再現しようと試みましたが、minmax(min-content, 1fr)は、横幅がコンテンツの量に対応せず、 minmax(min-content, 100%)、minm
flex-directionを指定した時に IE11で表示がおかしくなる | WEB PIXY
CSS3から新たに追加された Flexible Boxはプロパティが豊富で可変レイアウトに柔軟に対応できるのでレスポンシブデザインでの制作には欠かせないものになっています。しかし IEでデバッグをしていた時に flex-directionに関連するバグのようなものに遭遇しました。 IEだけ画像に余分な隙間ができる IE 11では flex-directionに columnや column-reverseを指定した子要素に画像があると、その子要素に画像の元サイズの高さ分のスペースができてしまいます。サンプル画像内にある写真の下のグレーの部分がそれにあたります。 解決方法 解決方法はシンプルで min-heightを利用します。IE 11以外のブラウザでの表示に影響はありません。以下がサンプルのコードです。 <div class="flex"> <p class="flex-inner">L
@supportsとIE11
Internet Explorer 11以下では@supportsがサポートされていない。そのおかげで実装ベースで(CSSハックなどというものなしに)安全にCSSの新機能を試せるようになった。しかしそうなるとIE11などというもののために大量の@supportsが出てくることになり、精神衛生上良くない。実装がある方を優先させCSS全体を適当な@supportsで括ってしまえば良さそうだ。 View Demo: Ban <=IE11 with @supports デモの段落は@supportsをサポートしている安定ブラウザーでは緑になり、IE11ではちゃんと赤になる。不明なAt規則とその子は無視されるようになっていることが確認できる。CSS仕様でもそうだが、IE11以下を含めおおよそすべてのブラウザーでこういう実装になっているはずだ。 CSS全体を括るのは雑過ぎるので、実際にはFlexbox
游明朝体・游ゴシック体の使用は注意しなくてはならない・・・ やってくれるねIE先輩！ - Qiita
WindowsでもMacでも同じフォントが使えるということで游ゴシックを試してみたのですが、IEでレイアウトがずれてしまいました・・・。 キャプチャを見てもらえれば分かるかと思うのですが、文字の下に謎の余白？が出来てしまっています MSコミュニティにもこんな質問があがっていました。 IEで「游ゴシック／游明朝」を表示させると、文字の下側に由来不明の余白が生じる 相変わらずIE先輩には悩まされますね・・・ 検証コード <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>游書体テスト</title> <style type="text/css" media="screen"> html { box-sizing: border-box; font-size: 16px; line-height: 1.5;
Internet ExplorerのどのバージョンからどのHTML/CSS/JSに対応しているかの一覧
Internet Explorer 7から対応したHTML/CSS/JS Internet Explorer 7はMicrosoft社から2006年10月18日（日本語版は11月2日）にリリースされたウェブブラウザ。 HTML 透過PNGフォーマット abbr要素 CSS 子供セレクタ（親要素 > 子要素 ） 隣接セレクタ（要素1 + 要素2） 間接セレクタ（要素1 ~ 要素2） 属性セレクタ（[属性名], [属性名="属性値"], [属性名~="属性値"], [属性名|="属性値"]） a要素以外をセレクタにした:hover擬似クラス, :active擬似クラス :first-child擬似クラス max-widthプロパティ, max-heightプロパティ min-widthプロパティ, min-heightプロパティ positionプロパティの fixed の値 border-c
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
IEとcalcとpaddingのバグ - Qiita
