背景色をrgbaとrgbで2重指定するときのIE地雷
はじめに結論 CSSで背景に透過色を指定する際に，本来のrgbaとIE6-8用のrgbを2重で書いたりしますが，うっかりハマるポイントがあるので紹介． 結論から言うと背景プロパティは，background-colorではなく，backgroundを利用しましょう，ということになります． Goodパーツ こう書くことを鉄の掟としておけば，特にハマることはないとおもいます．きっと． .someClass { background: rgb(128,128,128); /* または background-color: rgb(128,128,128); */ background: rgba(128,128,128,0.8); } 両方ともbackground指定にしておけば覚えやすくて安全ですが，rgb側はbackground-colorでも大丈夫です． Badパーツ こうやるとIE6-8で背
IE+JavaScriptで#02050aが透過されるバグ│JavaScript│グラビカ学習帳～ホームページ制作会社 gravity works（グラビティ・ワークス）の備忘録と知識の共有と蓄積
JavaScript（jQuery）を使って画像をフェードさせていたところ、 フェード中のいくつかの画像に白い点々が出ているのを見つけました。 （ディスプレイのドット落ちのような・・） 調べてみたところIEのバグのようです。 いろいろな方の記事で書かれているのを見ると、 発生条件は以下のような感じ。 ・JavaScript の filter:alpha(opacity); を使用 ・JPEG画像を使用 ・#02050a の色を使用 要するに、#02050a を含むJPEG画像をJSで透過させると、 #02050a の箇所だけが完全に透過JPEGになってしまう、 というバグのようです。IEのみ。 解決策としては 1. PNG画像などにする 2. #02050a を使わない 3. 背景色を #02050a にする となりますが、 何故かPNG画像にしただけでは直らず・・ 結局、PNG画像 ＋
IE にて a 要素の下に "@" を含む TextNode を append するとおかしくなる事がある件 - vivid memo
<!DOCTYPE html> <html> <head> <title>test</title> </head> <body> <div id="for_test"></div> <script type="text/javascript"> var p_elem = document.getElementById("for_test"); var test_elem = p_elem.appendChild( document.createElement("a") ); test_elem.appendChild( document.createTextNode(" @test ") ); test_elem.setAttribute( "href", "http://example.com/" ); </script> </body> </html> という HTML を表示すると、
IE8バグ？：a要素内に画像があってa要素に背景を指定した時に位置がずれる
キャプチャ見てもらうと分かるようにIE8だけ極端に位置がおかしい。 IE8がリリースされてから、まだあんまりいじってないのでよく分かってないのですが、今組んでいるサイトをIE8でチェックしたら、「あれ？表示がおかしい...」って事に遭遇してしまったので、エントリー。 よくある感じで、リストのマーカー変わりに背景の指定をa要素にして、そのリスト内には画像テキストが入ってたんです。はい。 毎度のようにサンプルも用意してみました。 サンプルを見る 発生条件は調べた感じa要素内にimg要素があって、a要素にbackgroundプロパティの指定をした時に起こる感じです。 img要素にテキストが隣接してても同様でした。 サンプルみたいなデザインの場合、マーカー部分も一緒に切ってしまう事が多いから過去の案件は大丈夫だと思うけど・・・ 取りあえず、今回のサンプルに使ったソースは以下です。 <ul> <li
これってIE8の不具合なんじゃね・・・？文字の大きさが勝手に変化するよ？
特別な仕掛けをしている訳じゃありません。ごく一般的なcss+xhtmlです。 上記は作動確認テスト文章。本文は以下。 当方、5月6日よりIE8にアップグレードし使用しています。 とりあえずWEB表示形式がWeb標準モードがデフォルトになり、これは嬉しい。 Firefox、Opera、GoogleChromeなどとほぼ同じWeb表示が出来るようになり（各ブラウザ微妙に違うけど）サイトのレイアウトを修正するのは今後楽になりそうです。 Javascriptの表示も随分高速化され、これも良いカンジ。 、、、、が、何か違和感がある。絶対おかしい。。。 時々、閲覧しているサイトが微妙に動く。ピクピクしてます。なにこれ('Α`) IE8を使用していると、時々文字の大きさが勝手に変化します。サイトによっては、閲覧者が混乱するくらい文字が暴れ回ります。 特に、AdSense広告やMicroAdの468X60
JScript Blog
This browser is no longer supported. Upgrade to Microsoft Edge to take advantage of the latest features, security updates, and technical support. Blogs from the JScript team in Microsoft Steps Toward Creating Compatible ECMAScript 5 Implementations As we’ve discussed in the past, Microsoft has been actively involved in the developing the... Author: GauravS Date: 06/29/2009 Native JSON Support in I
Kanasan.JS JavaScript 第 5 版読書会 #7: Days on the Moon
Kanasan.JS JavaScript 第 5 版読書会 #7 に行ってきました (当日のチャットログ)。範囲は前回に引き続き CSS の操作、そしてイベント周りと、一般に「JavaScript」といったとき話題になりやすい部分です。参加者のブログ記事は「JavaScriptでCSSとイベントを扱う from Kanasan.JS | Blog.37to.net」のほか読書会のページからたどれます。 display: inline-block; サイ本では解説されていませんが、CSS の display プロパティの値 inline-block に関して話が盛り上がりました。inline-block 及びそれがどのようなレイアウトに使えるかについては以下で解説されています。 書籍などに紹介されていない display : inline-block について (ヨモツネット) inlin
やっぱりIEのメモリリークは直ってなかった - zorioの日記
またAjaxianから。 http://ajaxian.com/archives/ies-memory-leak-fix-greatly-exaggerated IEがやってる事はonunloadでDOMを辿って循環参照してる所を消してるだけ。 なので、DOMツリー上にないelementが循環参照していた場合はやっぱりリークする。 実例。 http://grimpoteuthis.org/example/spew.html 4つほど事例があるけど、動的に作成したelementをappendChildしてないとか、または明示的にelem.parentNode.removeChild(elem)してるとかで、DOMを辿っても循環参照しているelementにたどり着けないようになっている。 上の例のような、動的にelementを作っておいてappendChildしないコードを書くことはあんまり無
JavaScriptでCSSとイベントを扱う from Kanasan.JS | Blog.37to.net
最終更新日 Sun, 19 Apr 2009 20:27:25 +0900 最後のコメント Mon, 14 Jul 2014 08:14:00 +0900 ブックマーク 先日開催された、Kanasan.JS JavaScript第五版読書会#7のレポートです。 今回はCSSとイベント処理の入門的内容でした。 ご参加頂いた皆様、ありがとうございました。 JavaScriptからCSSを扱う それ程難しくはないので、簡単にまとめておきます。 はまりがちな事 Element.style.colorなど、Element.style.〜のスタイルオブジェクトで操作出来るのは、 インライン指定されたスタイルのみなので気を付ける必要があります。 僕も最初の頃は知らずによく間違えていたのですが、これを知っていると無駄に時間を使わなくて済むと思います。 <style> #foo { background-c
IE+色指定無視でW3Cのサイトが読めなくなる話 | 水無月ばけらのえび日記
公開: 2024年3月7日16時40分頃 奇妙な現象に遭遇したのでメモしておきます。 IEを用意する (6でも8でもOK。たぶん7でもOK)インターネットオプションの「ユーザー補助」で「Webページで指定された色を使用しない」をチェックインターネットオプションの「色」で「Windowsの色を使用する」を外し、背景色に黒、文字色に白を指定こうすると、サイト側の色指定を無視して黒背景、白文字になる事が期待されます。この状態でもちゃんと読めるようになっている必要があるわけですが、http://www.w3.org/TR/WCAG20/ にアクセスすると……なんと、背景がほとんど真っ白で読めません。これはひどい。WCAG に限らず、W3C のサイト内のほとんどのページで真っ白です。 どうも、http://www.w3.org/StyleSheets/TR/W3C-REC の末尾にある という指定が
Opera の id, name 問題 - IT戦記
Opera たん… getElementsByName で id もとれる // <input name="foo" id="bar" /> // <input name="bar" id="foo" /> var elms = document.getElementsByName('foo'); alert(elms.length); // 2 ( id="foo" のほうも選択しちゃう ) getElementById で name だけとれる // <input name="foo" id="bar" /> // <input name="bar" id="foo" /> var elm = document.getElementById('foo'); alert(elm.id); // bar
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
IE の button 要素がおかしい - higeorange's blog