[B! IE][CSS] gt-r-blazeのブックマーク

[CSS]テキストに影を落とすCSS3 のプロパティ「text-shadow」

テキストに影を落とすCSS3 のプロパティ text-shadow についてまとめました。前回紹介させていただいた、ボックスに影を付ける box-shadow プロパティと使い方は似ています。 text-shadow の記述方法以下、text-shadow の基本的な使い方です。 p { -moz-text-shadow:5px 5px 5px #ccc; -webkit-box-shadow:5px 5px 5px #ccc; box-shadow:5px 5px 5px #ccc; } ※Firefox向け、Safari や Chrome向けのベンダープレフィックスも付けておきます。 text-shadow の値 text-shadow の値は以下のようになります。 1番目

gt-r-blaze 2020/01/21

IE
CSS

リンク

IE では main 要素の display は inline なので注意する

HTML5 から追加された要素 main ですが、レイアウトに導入するには注意が必要です。 IE9 ~ IE11(開発者ツール上は Edge 表記)では、main 要素の display プロパティの規定値は inline です。したがって、ページ全体の構成を main 要素で指定する場合には、main 要素に display:block を指定する必要があります。 Chrome や FireFox などは、main 要素の display プロパティの規定値は block ですから、重複する指定になりますが、IE のために回避できません。 main 要素に対して margin や padding が効かないときや、float や width が期待したとおりに動作しないときは、 main 要素の display プロパティを確認します。

gt-r-blaze 2019/07/05

IE
CSS

リンク

http://blog.e-riverstyle.com/2011/11/jqueryiejs.html

gt-r-blaze 2018/11/29

リンク

GitHub - rafaelp/css_browser_selector: A very small javascript library that allows you to create browser specific CSS to be merged into your normal classes. No more hacks or mischievous code in your CSS code.

CSS Browser Selector is a very small javascript which empowers CSS selectors. You can now write code for: browser, browser version, platform, platform version, device, device version. Best part: no more hacks; all compliant code. More info: http://rafael.adm.br/css_browser_selector beta/experimental versions: https://github.com/verbatim/css_browser_selector/ Identifies browsers: Firefox; IE; Opera

gt-r-blaze 2018/10/01

CSS
IE

リンク

最近CSSのremについての記事をよく見るがIE10以下では注意が必要

IE10以下ではremは使えないことがある最近CSSのremについての記事をよく見かける。remはemと違ってroot要素のフォントサイズを継承するためemのように直近の親からの継承によってフォントサイズが変更されてしまうことがないため便利だ。しかし、IE10以下では注意がremのフォントサイズが反映されないことがあるため注意が必要だ。とはいっても普通にfont-sizeでremを指定すれば反映されないということはない。（ただし、IE8以下では未対応）問題はfontプロパティ(ショートハンド)で以下のように指定したときだ。以下のようにfont-sizeではなくfontでremを指定するとIE10とIE9では指定したフォントサイズが反映されない。 body { font-size: 62.5%; } h1 { font: 10rem Arial; } ちなみにArialが指定されて

gt-r-blaze 2018/09/17

CSS
IE

リンク

[CSS][メモ] IE11でflex-basisにbox-sizingが効かない - Qiita

ul { display: flex; flex-wrap: wrap; width: 960px; margin: 0 20px; } li { flex: 0 0 184px; height: 40px; padding: 10px; box-sizing: border-box; } 上記のコードでChromeでは1行5列のリストが表示されるが、 IE11ではbox-sizingが効かず、5列目が落ちてしまう。これに対処する為には、以下のようにmax-widthをflex-basisと同値で指定する必要がある。 ul { display: flex; flex-wrap: wrap; width: 960px; margin: 0 20px; } li { flex: 0 0 184px; max-width: 184px; /* ← これを追加 */ height: 40px;

gt-r-blaze 2018/08/03

CSS
IE

リンク

IEでmain要素が認識されないことがある - Qiita

main要素にbackgroundやらmarginやら設定していて、なぜかIEで表示されなかった。なんでや！HTML5勧告やぞ！とパニクったので忘備録として残しておきます。 IEでmain要素が認識していなかったコード確認環境：InternetExplorer11.0.43 <body> <header> ヘッダー要素 </header> <main>  <section>コンテンツ</seciton> <section>コンテンツ</seciton> <section>コンテンツ</seciton> </main>  </body> IEで背景が表示されないのはwidthやheight指定がされていないのが原因～というのもありましたが、どうもそうでもない様子。それどころかmargin:autoが利いていなかった

gt-r-blaze 2018/06/27

CSS
IE

リンク

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-it ems:center はみ出す問題 Chrome IE11 はみ出てますね。起きる条件 IE10-11 f