ブラウザで表示が崩れた時の検証に便利！IE6-11, Edge, Chrome, Safari, Firefoxなど各ブラウザのCSSハック -Browser Hack Mixins
特定のブラウザで挙動がおかしい、期待通りにならない、そんな時の検証用に役立つ、IE6-11, Edge, Chrome, Safari, Firefoxなど各ブラウザのCSSハックがまとめられたSassのMixinを紹介します。 いざという時に、備えておきたいですね。 Browser Hack Mixins for Sass Browser Hack Mixinsの使い方 「_hacks.scss」をインポート。 コード: @import "hacks"; Mixinの使い方 基本書式: @include [Mixin_Name]{ selector, property, value } 記述例: @include only_ie9_below { .my_div, background-color, red } CSSハックの各ブラウザは、下記の通り。 そのブラウザのみ、バージョンのみ、
IEで「レイアウト崩れが起きてます」と言われた時の対処メモ（Internet Explorerの「互換表示モード」を解除する）
HOME>Web>IEで「レイアウト崩れが起きてます」と言われた時の対処メモ（Internet Explorerの「互換表示モード」を解除する） 業務でやっているとある企業のWebサイト（レスポンシブ対応、対象ブラウザ：IE9〜）構築で、こちら側のブラウザチェックでは問題ないのにクライアントから「こちらのPCで表示が崩れるんですが…」との連絡が。 対応していないCSS3プロパティの効果が見えないとかならまだしも、レイアウトがグチャグチャになっていると言われては冷や汗が止まりません。 しかも、制作側ではどのPCで見ても問題ない上、対応していないIE8ですら問題ないというのに…これは困った。 ie8で崩れぬ表示 クライアント先のie9で崩れている そんな悪夢（バグ）の波間で 終わらない旅路（デバッグ）を続ける堕天使（わたし） 虚しさの意味を知る 柔らかな風が吹くこの場所で… （GLAY/HOW
:not擬似クラスでCSS3のサポートをチェックする方法
CSS3の:notで擬似クラスのサポートをチェックする方法を紹介します。 １．はじめに 「:checked擬似クラスでチェックボックスに連動して要素を表示させる方法」で、CSSの:checked擬似クラスを使ってチェックボックスの操作に連動してテキストエリアの表示を制御する方法を紹介しました。 前述の記事の再掲になりますが、HTMLとCSSの設定は次のとおりです。 <style> .bar { display: none; } input:checked + label + div { display: block; } </style> <div> <input id="foo" type="checkbox" name="foo"> <label for="foo">foo</label> <div class="bar"> <label for="bar">bar:</label>
IEとjson | ko.a laboratory
YoutubeのAPIを使ってサイト背景に動画を流したい。 そのために指定したユーザの動画をjsonで読込みたい。 やりたいことは、ただコレだけなのです。あっという間に出来てしまって、喜んでいたのです。 IEで動作確認をするまでは。 IEがまたワタシを困らせる・・・ IEではフツーに書いてもjsonで読み込めないようです。 みんなIEに困り果ててた 弱りながら「IE json」というキーワードをGoogle検索画面に打ち込むと、みーーーーんな困っていました。 そして、「これで解決しました！」という方法が確立していないのです。 もうみんな、色々色々やってみて、「あ、できた」みたいな。 ワタシも、色々色々やってみました。 contentType: “application/json; charset=utf-8″ をつける。 json2.jsを読み込んでみる jQueryのバージョンを変えてみ
[IE6|IE7|IE8]cloneNodeで複製したエレメントのidをjQueryから参照出来ない時のTips - Web 業界の技術屋 | VIVID Labs.
var content = document.getElementById('listBox'); var clone = document.getElementById('list1').cloneNode(true); clone.id = 'temp'; clone.style.position = 'absolute'; clone.style.left = '600px'; content.appendChild(clone); $('#temp').animate({left: 400}); cloneNode して、id を書き換えて親要素に appendChild して動かそうとした訳です。 IE 以外のブラウザはこれで問題無く動きます、IE 以外は。 IE だけは #temp を呼ぶと複製元である #list1 を参照して、そちらを動かそうとします。ちなみにリスナを仕掛け
CSSで半透明にできるOpacityプロパティとIEでの問題について
ちょっと上手くいって感動したので書きます。今回も番外編で、小ネタです。 ブログのデザインを変更していると、ある要素を透明にしたい時がある。透明にするには、CSSでは次のように設定する。 要素を透明化する CSS プロパティ CSS3 で入ってきたプロパティのようだが、opacity を設定すれば透明化できる。 opacity:0.7; 0 が透明で 1 が不透明、0～1 の値を指定する。 これで Firefox や Chrome では透明化できたのだが、IEでは出来ない。ネットで調べると、IE では Opacity は使えず、filter を使うそうだ。 filter: alpha(opacity=70); /* ie 6 7 */ -ms-filter: "alpha(opacity=70)"; /* ie 8 */ IEの透明度は0～100の％で指定する。 この他、Firefox や
CSSハック IE全バージョン｜design@ - superChemical
design@ - superChemical designに関するtips。とりいそアメブロのカスタマイズ等 « CSS基礎 記事背･･･ 記事一覧 CSS基礎 画像ロ･･･ » CSSハック IE全バージョン 2012-02-26 03:13:13 テーマ：CSS どうもこんばんは！ 今回はちょっと専門的なのですが…ハックに関して書きたいと思います！ IEには悩まされること多いので… そういったときにCSSハックを使うといいでしょう。 個人的に使いやすいと思う物をメモしておきます。 IE6以下 .hack{_color:#fff;} * html .hack{color:#fff;} IE6以外 html>body .hack{color:#fff;} IE7のみ *:first-child+html .hack{color:#fff;} *+html .hack{color:#fff
WEB制作のIE対策いろいろ チートシートやHTML5/CSS3対応方法など | DECONCEPTER
かわいいあいつIEとの付き合い Internet Explorer 通称 IEはかわいいやつである。私の心を掴んで離さない。IEについて言及すれば火が燃え上がる、存在が燃えている最強の火種だ。 なぜこんなにIEはかわいいのか。テーブルタグでウェブサイトをレイアウトする時代からCSSでレイアウトする時代へ移行する際はIE5/IE5.5/IE6/Mac IE5.2でどうしたら同じレイアウトを実現できるかを苦悩させてくれた強敵（とも）だった。 昨今のHTML5バンザイWEB制作においては、最新機能を使ってWEBサイトを作る上でIEの表示や機能をどうするかという話題が常にモチキリだ。 そんな我々の心を離さないIEの対策をする上で一つ一つ表示を確認しながら作っていたら日がくれて定年を迎えてしまう。IE定年を迎えないためにある程度どういう対応が必要かよくまとまっているサイトを見ていこうと思う。 チート
IEでzenbackとjQueryのコンフリクトによる不具合を回避する方法
IEでzenbackとjQueryのコンフリクトによる不具合を回避する方法を紹介します。 １．問題 IEでzenbackとjQueryプラグイン（例えばjQuery ligthboxプラグイン）を併用する場合、次のようなソースコードになると思います。（zenbackのコードは便宜上改行しています）。赤色がjQueryプラグイン、青色がzenbackです。 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script> <script type="text/javascript" src="js/jquery.lightbox-0.5.js"></script> <script type="text/javascript"> $(function() { $('#gallery a')
pk10计划人工在线计划-快3网投平台
地址：浙江嘉兴嘉善县卫巷008号 电话：072-55269409 传真：072-55269409 邮箱：308676405@008.com pk10计划人工在线计划作为2017年3月29日三星发布的旗舰手机���，把过已经过去了快三年时间�� ��。 27����、年年仁济南院开诊时间� �：周一至周六全天停诊时间���：周日部分诊疗项目暂停服务情况���：口腔科实行全预约����，暂取消拔牙���、补牙����、洗牙业务���。pk10计划人工在线计划10�����、案件第六人民医院医院自2月3日起开诊�����。 2���、呈高预约就诊����：所有门诊（包括普通门诊）均推行实名制预约���。把过（五）其他��� ：门诊入职体检暂停��� �。年年1）网站预约���：①上海医联预约平台https�����：pk10计划人工在线计划//yuyue.shdc.org.cn/� ���。 详
PIEバグレポート
この記事は1年以上前の記事のため、内容が古い可能性があります。 複数のタグの中にあるブロック要素のタグを角丸にする場合、角丸が効かない場合があります。 例） <div class="box_outer"> <div class="box"> PIEではIEでも<br /> 角丸・ドロップシャドウ・グラデーションを<br /> 実行できます。 </div> </div> この要素の各スタイルは以下の通り .box_outer{ padding:20px; background-color:#FFF; } .box { padding:20px; background-color:#EEE; border:solid 1px #000; /*角丸*/ -moz-border-radius: 15px; /*FireFox*/ -webkit-border-radius: 15px; /* Sa
CSS3 PIEでつまづいた点 « minimo
CSS3 PIE(http://css3pie.com/)を利用するとIEでCSS3の各種プロパティを表現できるのだけど、使っていてつまづいた点があったのでメモ。 グラデーションがうまく表示されない。 グラデーションはCSS3 PIE独自のプロパティ（-pie-background: linear-gradient(#000000, #FFFFFF);）で記述が必要。 bodyに背景を指定したら、手前の要素に指定してあったプロパティが適用されなくなった。 「behavior」を記述したプロパティに「position:relative」を記述すると表示された。 .navi { position: relative; background:-moz-linear-gradient(19% 75% 90deg, #FFFFFF, #f7b30e); background:-webkit-gra
【CSS】IE6 リストで隙間が出るバグ | Yuki's SlowLife
IE7だと問題ないのですが、IE6で出る症状です。リストでナビゲーション作ってるときによく出くわします。←こんな感じで、リストに妙な隙間が出るやつ。margin:0px;にしてもpadding:0px;にしてもこの隙間は一行に消えません。 ＜ul＞ ＜li＞＜a href="#"＞ナビゲーションＡ＜/a＞＜/li＞ ＜li＞＜a href="#"＞ナビゲーションＢ＜/a＞＜/li＞ ＜li＞＜a href="#"＞ナビゲーションＣ＜/a＞＜/li＞ ＜/ul＞
IE9でMovable Typeを利用する方法
IE9でMovable Typeを利用する方法を紹介します。 2013.04.25追記 IE9でMovable Typeの管理画面を操作できるようにする「EmulateIEプラグイン」を公開しています。 １．問題点 Movable Type 5.0までのバージョンはIE9に未対応のため、IE9では管理画面が正常に動作しない可能性があります。 対処方法の話の前に、２～４項にMovable Typeの各バージョン＋IEの各バージョンの組み合わせによる動作をざっと確認して結果を掲載します。注1／注2 注1：IE6～IE8はIETesterによる動作確認です。IE9は本物で確認 注2：記事投稿・一覧表示・テンプレート変更など、一部の動作のみ確認しています。 ２．Movable Type 4.27 IE6：OK IE7：OK（画像上） IE8：OKですが一覧画面のスタイルがやや崩れる（画像中） IE
zoomを使うとlist-style-typeがおかしくなる
こんばんわ、おひさしぶりです。 溝上です。 なんだかひさしぶりにブログを書く気がします。 そんなわけで今回は軽くリハビリがてら、 最近遭遇したIEのバグについてお話したいと思います。 それでは早速サンプルをご覧ください。 ▼スクリーンショット ※スクリーンショットは、Windows Internet Explorer 6.0のものです。残念です。 （htmlコーディング） <ol class="number"> <li>あいうえお</li> <li>かきくけこ</li> <li>さしすせそ</li> <li>たちつてと</li> </ol> <ol class="alphabet"> <li>あいうえお</li> <li>かきくけこ</li> <li>さしすせそ</li> <li>たちつてと</li> </ol> （cssサンプル） li{ zoom:1; } ol { margin-le
HTML5の新要素をinnerHTMLで生成できないバグを回避する - latest log
IE6〜IE8のinnerHTMLには問題が多く、そのひとつに、HTML5の新要素を食わせると悪夢のようなDOMツリーを生成するというものがあります。 var div = document.createElement("div"); div.innerHTML = "<section>section</section>"; document.body.appendChild(div); 上記のコードを実行すると、body以下にはこのような構造ができてしまいます。 <body> <div> section </SECTION> </div> </body> どうやら、innerHTML に与える文字列を div でラップし、div要素の前に何か一つ以上のダミーの文字列を設定しておき、あとでアンラップすれば上手くいくようです。 http://jsdo.it/uupaa/IEInnerHTMLB
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
http://no-delay.com/?p=1505
06.GRASSHOPPER
ちょんにょろチェッカー
http://indigonote.com/2011/04/26/css3-pie/