この記事は CSS Advent Calendar 2017 5日目の記事です。IE11/Edgeがメインの時代になったとはいえ、まだまだIEのみ表示がおかしいことがあります。そんなときに使えるCSSハックをまとめてみました。暇なときに少しずつ検証したので、以下で紹介するハックは動作確認済みです。
今日は小ネタですが、内容は大きいです。サイトでサポートするブラウザからIE 9やIE 10をを切り捨てて、IE 11だけ気にすればよくなる日が近づいています。つまり、HTML5やCSS 3を安心して使えるようになるということです。Vistaのサポートが終了する4月11日が待ち遠しいですね! Windows Vista SP2の延長サポートは2017年4月11日に終了4月11日から、IE 9もIE 10もサイトでサポートしなくてよくなります。 というのも、マイクロソフトは、Windows Vista Service Pack 2(Vistaの最終バージョン)の延長サポートを2017年4月11日に終了するのです。 「延長サポート」とは、メインストリームサポートが終了したあとに、セキュリティ更新プログラムを提供するサポート期間です。延長サポートが終了するということは、セキュリティに問題があっても
2016.09.26 Win8.1・Win10のIE11で、游書体(游明朝・游ゴシック)の余白がおかしい!どうする? 案件で起きたことの覚書です。 案件でのテキスト周りのルールは、 テキストは明朝体で表示する テキストはシステムフォントで表示する(=Webフォントは使わなくてよい) ボタン等は指示がない限りテキストで表示する だったので、font-familyを以下のように指定していました。 font-family: Century, "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN","HG明朝E","MS P明朝","MS 明朝",serif; システムフォントで表示するので、Windows8.1、Windows10、Macでは、游明朝が表示されることになります。 流し込みのテキストだとまったく気になりませんが、CSSで作
InternetExplorerは昔かサイト制作者を悩ませ続けてきました。せっかくレスポンシブサイトを作ろうとしても、レスポンシブサイトというとセットでついてくるメディアクエリ、これにはIE8以下の下位バージョンが対応しておらず、表示は見事に崩れます。 未だ切り捨てられないIEへの対応 モバイルファーストかつレスポンシブということを思えばIE、しかも下位バージョンなら切り捨ててもいいのではないかと思いますが、様々な事情から切り捨てられないシーンもあるでしょう。以前に比べれば低くなったとは言え、特に日本ではIE8のブラウザシェアはまだまだ残っています。 そういった時のために、比較的手軽にIE向けの対応を行える方法があります。 1.「css3-mediaqueries.js」を読み込む こちらはGoogleが推奨している比較的有名なスクリプトです。html5.jsやIE9.jsなどと併用しても
IE6の国内シェアは7.1% 今日のブログはIE6やIE7等の古いブラウザ対策で悩む、Web制作者や中小企業のWeb担当者の方々に贈ります。 Microsoftは、これまでもセキュリティー上の問題から、またIT投資の不効率性の問題からIE6の使用をやめ、その他最新ブラウザーにアップグレードするよう、世界中のインターネットユーザーに呼びかけてはいます。 IE6消滅までのカウントダウンを行う特設サイト「The Internet Explorer 6 Countdown」によればInternet Explorer 6のシェアは日本国内において7.1%まで落ちました。 IE6消滅までのカウントダウンを行う特設サイト「The Internet Explorer 6 Countdown」 http://www.ie6countdown.com/ この数字も含めて現状を知った上でIE対策を考えてみました
IE6/7/8でもCSS3の角丸、ボックスシャドウ、グラデーション、マルチバックグランドなどを使えるようにするbehaviorスクリプトを紹介します。
CSS3で最も簡単にクロスブラウザの角丸を実装したい。 そんなときにおすすめなのが、『curved-corner』。CSS3でIEにも角丸を適用させるhtcファイルです。 Google Codeで、CSS3でIEにも角丸を実装させるファイルが配布されていますね。 クロスブラウザの角丸を実装するには、「border-radius.htc」ファイルをダウンロード、配置して、CSSに以下のように記述すればOKです。 CSS3 -moz-border-radius: 32px;//for Firefox -webkit-border-radius: 32px;//for Safari and chrome border-radius: 32px;//CSS3 behavior: url(border-radius.htc);//for IE すごく簡単な方法なので、CSS3での角丸はこれで決まりな
YouTubeやDiggといった海外でアクセスの多いサイトが次々と IE6 のサポートを中止する動きを見せています。YouTube は他のブラウザに変更するメッセージの表示以外に具体的にどのようなサポートを止めるのかが分かりませんが、Digg では、コメントや Digg ボタンといったサイトのコア機能のサポートを止めることを考えているそうです。このニュースに影響されたのか、Twitter では、「IE6 Must Die」が、トレンドトピックにランクインしましたし、Twibbonを使った運動も展開されています。 ここ数年ほど、私は最新のブラウザで作りたい形を組み立てて行き、IE6 での表示をどう調整するかという進め方にしていますが、提案したいアプローチが場合によって IE6 では厳しい場合があります。JavaScript を使えば擬似的に CSS2.1 CSS3 のセレクタが使えるとはいえ
何かしらのサイトを組んでいる時って誰でも一度は思うんだろうけど、 「IEなんて・・・(自重」、「IEさえ・・・(自重」、「ちょ、IEおま・・・(自重」 とか、思うっすよね。 ボクも勿論その中の一人で、特にIE6に関しては常に思ったりしています。 IEのために今までどれだけの時間を費やしたか・・・と思えるほどに。 そんなIEさんですが、今日は逆にIEが有るから助かってるかもって思えるお話です。 ぇーまぁそんな訳で、明日からIEが一切なくなったとして。 「3番目のグローバルナビだけちょっと指定変えてもらえる?」 と、言われて、 『class追加するのやだなぁ』 ってのが、 「リンク先変わらないんだから属性セレクタ使えばいけるっしょ」 って言われてしまったり。 「そこの最初のh3だけmargin-topは0で、他のh3は30pxでお願い」 と、言われて、 『最初のh3だけclass追加しないとい
IEでは右端のスクロールバーが常に表示されているのに対して、FireFoxではコンテンツが少ないと スクロールバーがなくなってしまう。そうするとコンテンツをセンタリングさせた時などにずれる。 で、最終的にIEでもOperaでもFireFoxでもずれをなくす方法はコレ。 ※ 但し、最下部にフッター固定のテクニックを使っている人は使用に際して注意されたし。 html { height:100%; margin-bottom:1px; } 基本的な考え方 とりあえずFireFoxで常にスクロールバーを出すには html{overflow-y:scroll;} と指定してあげればいい。 bodyに適用するとIE6と7で二重にスクロールバーができてしまうので htmlに適用しているのがポイントです。 ところが、これだとOperaには対応していない。 overflow-yは元々はIE独自でcss3にな
The internet is a worldwide network system. It is a system architecture that has completely transformed communication. Internet has eased people’s life. One can communicate with anyone at any point of time. The popularity of the internet is due to its speed, accuracy and various other benefits. The ability to connect people from all over the world, share information and resources, and conduct bus
IE 6.0 - Browsers - Multiple Explorers ブラウザの速度比較のリンク先でも出てましたが、古いバージョンのIEを使う方法。 サイトでは、IE3、IE4、IE5.01、IE5.5sp2のバイナリが配布されており、解凍してすぐ使えます。 古いバージョンのIEでいろいろページを見ていると、CSSでデザインされているページの場合、結構デザインが崩れてたりします。 古いIEはないから動作検証できないなぁ、と思っていた人にもこれである程度調節は出来ます。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く