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> よくあるカタチで、縦並びにヘッダー、メインコンテンツ（左右に２カラムあるとします）、フッターがあります。 これら
マイクロソフトの「IE 11」で旧版IEを動かす--互換モード「Enterprise Mode」
Mary Jo Foley （Special to ZDNET.com） 翻訳校正： 編集部 2016-01-13 11:12 Microsoftは米国時間1月12日、「Internet Explorer 11（IE 11）」以前を使っているユーザーほぼ全てを対象にした最後のセキュリティアップデートを配布した。 「Windows Vista」「Windows Server 2008」「Windows Server 2012」それに一部の「Windows Embedded」シリーズはまだ時間があるが、「Windows 7」「Windows Server 2008 R2」「Windows Server 2012 R2」については今後、IE 11以上がセキュリティアップデートの対象となる。Microsoftは1月12日以降のIEのサポートポリシーについて、一覧を掲載している。 旧バージョンのIE
Web制作で使いこなしたいIE開発者ツールの最新機能
最新版のWebブラウザー「Internet Explorer 11」（以下、IE）は、2013年10月に正式リリースされ、その後のアップデートでも機能が少しずつ強化されてきた。例えば、2014年4月のWindows 8.1 Update 1提供と同時に機能が強化され、2014年8月のアップデート（August Update）でもさらに更新されている*1。 *1 以前のIEでは、IE5／IE6／IE7のようなメジャー・バージョンアップのタイミングで新機能が搭載されていたが、現在のIEでは他のマイクロソフト製品と同じく、1年の間に何度もアップデートが行われるようになっている。 そのIEにも、Chromeのデベロッパー・ツールと同様に、Web制作者向けのツール「F12開発者ツール」が標準搭載されており、そのツールもIE10以前からIE11のアップデートで大幅に変更されている。そこで本稿では、強化
Microsoft、Internet Explorerのサポートを最新版のみに - 2016年1月から
米Microsoftは8月7日(現地時間)、Webブラウザ「Internet Explorer (IE)」の利用者が、より安全で新しいWeb標準に対応する最新バージョンを使用するように、2016年1月12日からIEのサポートサイクルを変更すると発表した。Windows VistaならIE 9、Windows 8.1ならIE 11というように、WindowsおよびWindows Serverの各プラットフォームで使用できるIEの最新版のみにテクニカルサポートとセキュリティアップデートを提供する。 公式ブログで公開された記事「Stay up-to-date with Internet Explorer」によると、2016年1月12日時点で以下のようなWindowsプラットフォームとIEバージョンの組み合わせがサポートされる予定だ。 Windows Vista SP2：Internet Expl
Nicescroll jQuery Plugin – jQuery plugin for custom scrollbars on desktop and mobile browsers
jQuery Plugin for custom scrollbars on mobile and desktop browsers
Web制作者は注意！ Internet Explorer 11で変更された「互換性」
Windows 8.1正式版がMSDNサブスクライバー向けに公開され、それに標準搭載される「IE11」も正式版となった。しかしこのIE11にはWeb制作者に大きな影響がある「互換性」に関する変更が含まれている。 2013年9月10日、MSDN Subscriptionの登録者は、Windows 8.1正式版がダウンロードできるようになった。Windows 8.1の標準ブラウザーであるInternet Explorer 11（以下、IE11）では、互換性に関する大きな変更が加えられている。 ご存じのとおり、IEは、現在も更新されているブラウザーの中では最古参のブラウザーである。ほかのブラウザーが新しく登場して、HTML5などモダンな機能を実装していく中、互換性の課題に引きずられているという問題があった。また、HTML5などのサポートが遅れたため、ほかのブラウザーと同様にモダンな機能を提供して
Macでも無料でIE確認するためのModern.IEが想像以上に快適だった
これまで、MacBook Air 上で制作したWebページを IE 確認する時は、「VirtualBox」や「Parallels Desktop」という仮想PCアプリケーション上で Windows 8 などを起動し、そこで IE を起動して表示確認しています。 私は、 Windows XP – IE8 Windows 7 – IE9 Windows 8 – IE10 のように、なるべく一般的なOSとブラウザーのバージョンで合わせて個別の仮想PCをインストールしていますので、実機で確認するのと比べてもほとんど遜色のない精度でIEでの表示確認をすることができています。 その際、「Windows 8 – IE10」環境は、パフォーマンスが良いと聞いて購入した「Parallels Desktop 7」という仮想PCアプリケーションを使用していました。 しかし、OS X を Mavericks（10
[CSS]IE9対応、IEの各バージョンごとに異なるスタイルシートを適用する方法のまとめ
IEの各バージョンごとに異なるスタイルシートを適用する方法はいくつかあります。それらの利点・欠点を検討し、さらにIE9へどのように対応したらよいのかを紹介します。 In defense of CSS hacks — introducing "safe CSS hacks" [ad#ad-2] 下記は各ポイントを意訳したものです。 Conditional stylesheets -条件付きコメント：スタイルシート Conditional classnames -条件付きコメント：class名 CSS hack -安全なCSS hackとは 条件付きコメント：class名とCSS hackのコンビネーション [ad#ad-2] Conditional stylesheets -条件付きコメント：スタイルシート 条件付コメントはInternet Explorerの特定のバージョンでロードさせるべ
クロスブラウザな CSS box-shadow - Opera Developer Community
IE9 に関する情報は IE9 Developer Preview 3 を元にしています。 IE フィルター 私は最近 IE の CSS フィルタについて多くのことを学びました。まず最初に、 blur フィルター が IE で要素をぼやかすのにつかえます。 簡単な <div> 要素を使った例を見てみましょう: <div style="background:blue;height:100px;width:100px;"></div> これは 図1 のようになります。 図1: 固定領域を持つ簡単な <div> 要素 次のフィルターを使って、 IE で半径 5 ピクセルをぼやかすことができます: <div style='background:blue;height:100px;width:100px; filter:progid:DXImageTransform.Microsoft.Blur(p
jQueryでドロップシャドウを表現する「Drop Shadow Effect」
jQueryでドロップシャドウを表現する「Drop Shadow Effect」 Check Tweet 配布元：Drop Shadow Effect ライセンス：public domain Drop Shadow Effectは簡単にドロップシャドウが表現できるjQueryプラグインです。 CSS3などでは以下のように指定するとテキストシャドウやボックスシャドウを実装することができます。(ボックスシャドウはwebkit系ブラウザでのみ閲覧可能) #text{ text-shadow:3px 3px 5px blue; } #box{ -webkit-box-shadow:3px 3px 5px blue; } サンプル１ Drop Shadow Effectを利用するとすべてのブラウザで同じような表現が可能になります。 $(function(){ $('#text span').drop
IE-winで透過PNGを利用する方法 - Archiva
Make a note of it: Web tech, montaineering, and so on. Note: この記事は、3年以上前に書かれています。Webの進化は速い！情報の正確性は自己責任で判断してください。 サンプルは透過PNG。テキストの上に、透明度36%の矩形を重ねてある。IE6とFirefoxでは見え方が違うことが解るだろうか？ 左がIEで見た場合、右がFirefoxで見た場合。バージョン６までのIEはPNGのアルファチャンネル（半透明）に対応していないので、普通に使うと透過部分が灰色っぽくなり、期待はずれな結果に終わる。IE6でも透過PNGを表示するには、次のように記述する。 #overlay { filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="./overlay.png", sizi
透過PNGがｊQueryアニメーションでopacityを使うとIE8だけ黒く塗りつぶされて表示されてしまいます。対策として、pngFixを施したりDD_belatedPNGやjQuery.belatedPNGをやってみたのですがだめでした。（IE6と7は対象外なので考えておりませ...
透過PNGがｊQueryアニメーションでopacityを使うとIE8だけ黒く塗りつぶされて表示されてしまいます。 対策として、pngFixを施したりDD_belatedPNGやjQuery.belatedPNGをやってみたのですがだめでした。 （IE6と7は対象外なので考えておりません。） 黒く塗りつぶされてしまうpng画像は、主にテキストをpng画像として保存したものです。 今後のIE対策としてもクリアしておきたいところなので、ご教授して頂ければ幸いです。よろしくお願い致します。
IE6〜8でCSS3セレクタ利用「Selectivizr」
CSS3セレクタを使う上で問題となるのはやはりIEです。HTML5 & CSS3 Supportで確認すると、IE6～8はほとんど対応できていないことが分かります。 そんなIEでもCSS3セレクタを使えるようにするのがSelectivizr.jsです。詳しく紹介されているサイトがあまりなかったのでご紹介。 Selectivizrの設置方法 ここで提供されているselectivizr.jsとJavaScriptライブラリを外部ファイルで読み込むだけで、CSS3セレクタがIE6～8でも利用可能となります。コードも外部ファイルを読み込むだけですのでとてもシンプルです。 <script type="text/javascript" src="[JSライブラリ]"></script> <!--[if (gte IE 6)&(lte IE 8)]> <script type="text/javascr
font-familyの指定はウェイトなしのアルファベット表記のみでほぼよさそう | Culture27
font-family: 'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','メイリオ',Meiryo,'ＭＳ Ｐゴシック','MS PGothic',sans-serif; 同じフォントを日本語表記とアルファベット表記の両方で指定しているのは、各ブラウザの解釈や挙動が異なるなどの理由からです。ただ、最近のブラウザはどうなんだろうかとちょっと気になったので調べました。 結果としては下記の表になりました。詳細はデモページを見てください。 Parallels上のWin7: IE6-8(IE6,7はIETester), Chrome15, Firefox8, Safari5, Opera11 Mac OS X 10.6.8: Chrome15, Firefox8, Safari5, Opera11 文字コード: UTF-8 指定方法 IE Chrome Saf
CSS3×PIE.htc の記述ルール | チーフコーダーのCoding Memo | Webcoding.jp
前回の記事 で触れたjavascript (.htcファイル)「PIE.htc」。 今回はそのCSS3 PIE の記述ルールの備忘録。 まずは現時点で無難にクロスブラウザで使えるスタイルのおさらい。 ・border-radius（ボックスに角丸をつける） ・box-shadow（ボックスに陰影をつける） ・border-image（境界線に画像を使う） ・multiple background images（背景に最大４つの画像を使用できる） ・linear-gradient as background image （背景にグラデーションをつける） 基本の記述。 セレクタ { CSS3プロパティ : 値 ; CSS3プロパティ : 値 ; CSS3プロパティ : 値 ; : ; : ; position: relative; behavior: url(“/PIE.htc”); } ※ f
CSS3 PIE: CSS3 decorations for IE
PIE makes Internet Explorer 6-9 capable of rendering several of the most useful CSS3 decoration features. Try the Demo This quick demo shows just a few of the CSS3 properties PIE can render. Use the controls to adjust the CSS3 applied to the box. Load this page in IE to see that it is rendered properly!
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
html5shiv - Project Hosting on Google Code
Internet Explorer デベロッパー センター
IEでpngを使った際に起きる不具合を防ぐプラグイン
5509.me