我々は何年待ったのか？このお手軽外接リサイズobject-fitの登場を！なのにIE11非対応って哀しすぎる。またしてもこの余生ブラウザにもどかしい思いを味わっているのだ。 Edge非対応OS、Windows7のサポート終了まで約1年半（2020年1月終了！）。だが、大丈夫。手はあるんです！ 目次： object-fitとは何ぞや 配置した画像 object-fitのコード いろいろなobject-fit object-fit前のおもひでぽろぽろ 大問題！IEで見たらfillってるぢゃないか！！ IE11の寿命おさらい 1年半も待てない！IE対策してくれるJSファイル 忘れちゃならねぇCSS追記でIE対策完了！ object-fitとは何ぞや たとえばこんな記事一覧があったとする。 この左側の画像に、object-fitを使っています。 いったい何をしているのか。ここでやっているのは「外接

jQuery などの JavaScript を活用して ul / ol / li 要素をアコーディオンさせるときなどに、 「・」のマーク(記号)を非表示にできない・消せない問題があります。この問題は特に IE (10, Edge など) で起こります。 一般に要素の記号を消すためには list-style-type: none を設定します。 デバッグしてみるとこの CSS は適用されているのですが、対象の要素が再描画されるまでこの問題は発生します。 問題の発生条件 概ね次のような条件で発生するようです。 ul / ol / li 要素が何かしらの CSS の設定によって不可視の状態のまま描画される。 該当する要素が JavaScript や hover などのイベントによって可視化されるとき、記号が描画されたままになる。 該当する要素が一度可視化された後に、イベントやアクションによって再

以前「object-fitをつかって画像をボックスいっぱいに表示させる方法」でobject-fitを紹介いたしました。私も非常に便利でよく使っているプロパティーの一つです。 そして使えば使うほど、PC向けにもこのプロパティーは使用したくなります。 そこで問題になるのがInternet Explorer（以下IE）とEdgeです。 object-fit-imagesを使用して対応する 先述のブラウザはobject-fitに対応していません。そこで「object-fit-images」というライブラリを使用します。 まずは上記のページにアクセスして緑色の「Clone or download」ボタンを押してライブラリをダウンロードしてください。 HTML まずはjQueryの呼び出しの後に、ライブラリを呼び出します。 このライブラリは「dist」フォルダの中に格納されています。 <script

tableを構築していて、スマートフォン用の表示に対応させようとするとセルの幅が狭くなって文字が読みにくくなってしまうのをdiplay:block;にする事で対応しています。 今回はレスポンシブで作成している時に同じくdisplay:block;をした際にIE9、IE8で効いていなかったので対策を調べてみました。 IE9以下でのtd,thをdisplay:block;するにはfloat:left;を付けると解決されました。 floatをかける事でブロック要素として認識されるようです。 IE以外でfloatがかかってしまうと不具合が出てきてしまいそうですので float:left\9;などとしてIE9以下にスタイルがあたるようにしました。

画像を使ったリンクで、背景画像をスタイルシートのポジションで移動させて ロールオーバーの効果を作る方法があります。 まずは以下のような画像を用意します。 a.link-image { background-image: url(img/link-image.png); width: 200px; height: 45px; text-indent: -9999px; } a.link-image:hover { background-position: bottom; } これと同じように、フォームボタンに適用してみたのですが、IE（Internet Exproler）で見ると 背景画像どころか何も表示されません。 Firefox、Safari では、Mac版もWin版も問題なく出ています。 input[type="submit"] { background-image: url(img/

以前からInternet Explorer（IE）の新版がリリースされると、Windows Updateによって自動的にアップグレード（自動更新）されるようになっている。これは通常の更新プログラムやセキュリティ・パッチと同様、特にユーザーに確認することなく実行される。そのため、Windows Updateでパッチ適用をしている環境では、ある日気が付くとIEがアップグレードされていたということになりがちだ。IE10での検証が終わっていないWebアプリケーションなどを使っている環境では、避けなくてはならない事態だろう。 これを防ぐには、マイクロソフトが無償で提供している「Internet Explorer 10 自動配布の無効化ツールキット（IE10ブロック・ツール）」が利用できる。IE10の自動アップグレードが始まる前に、このツールを実行して自動アップグレードを無効化しておけばよいのだ（いっ

Every great idea deserves a great domain name, every great domain has the potential to be a great brand.

一定期間更新がないため広告を表示しています

既に攻撃コードが出回り、セキュリティ専門家はIEのユーザーに対し、Microsoftがこの問題に対処するまでの間、ChromeやFirefoxなど別のWebブラウザに切り替えることを勧めている。 米MicrosoftのInternet Explorer（IE）に、また新たな未解決の脆弱性が報告された。IE 7と8を標的とした攻撃が既に発生しているもようだ。米SANS Internet Storm Centerやセキュリティ企業各社が9月17日に一斉に伝えた。 IEの脆弱性を悪用するコードは、先に発覚したJavaの脆弱性（Oracleが8月30日に対処済み）について調べていた研究者が14日に発見し、最新のパッチを当てたWindows XP SP3上で悪用できることを確認した。 この脆弱性はIE 7／8／9に存在し、細工を施したWebサイトをユーザーが見ただけで被害に遭う可能性があるという。M

jQueryでスライドダウンを作っているときにIE 8だけで動いていないのを確認したので、そのメモです。検索しても原因が分からなかったので自分で調べてみました。 作っていたのは以下のようなコードでした。 <div id="slide"> <h2>スライドダウン</h2> <p>テキスト。テキスト。テキスト。...</p> </div>jQuery(function($) { $('#slide > p').hide(); $('#slide > h2').click(function() { $(this).next().slideDown(); }); });これがIE 8の場合だけ動かなかったんですね。 ちょっと検索してみたら、IE 8にはslideDown()が動かない場合があるから、 <meta http-equiv="X-UA-Compatible" content="IE=7"

IE7には position:absolute な要素の z-index 表示に問題があり、以下のような場合に #lower が #upper にかぶってしまう。 <div id="upper_container"> <div id="upper"> これは上に表示されます </div> </div> <div id="lower_container"> <div id="lower"> これは下に表示されます </div> </div> #upper_container { position: relative; } #upper { position: absolute; z-index: 10; } #lower_container { position: relative; } #lower { position: absolute; z-index: 5; } そんなときは、re

最近の更新履歴 2011-12-07 Ver 1.3.2 リリース jQuery 1.7.1に対応しました。 2010-12-27 Ver 1.3.1 リリース fixed 要素がブラウザ表示エリアから隠れ１度非表示状態になると、ウィンドウをリサイズし表示エリア内におさめても非表示状態が続いてしまう不具合を修正しました。 2010-11-14 Ver 1.3.0 リリースしました。exAPI ベースの実装に変更しました。サイズに auto を指定できるように変更しました。 2009-12-08 Ver 1.2.2 リリースしました。IE6 にて fixed 対象要素を非表示にしても表示されてしまう不具合を修正しました。Ver 1.2.1 でサイズを明示せずプラグインを実行すると fixed されない不具合を修正しました。 more jQuery exFixed を使用すると、IE6 で p