移転しました http://please-sleep.cou929.nu/20090815.html
移転しました http://please-sleep.cou929.nu/20090815.html
今日ちょっとひっかかったIE7のCSSバグをメモしておきます。 どうやらborder付きのbox内に2重に入れ子にしたfloatさせたboxの親要素(ややこしい!)のmarginが効かなくなるようです。 口で言い表しづらいので、以下のソースを見てください。 XHTML <div id="page"> <div id="content"> <ul> <li id="hoge">hoge</li> <li id="huga">huga</li> </ul> </div> </div> こうなっている時、#contentにborderが設定されると、UL要素のmarginが効かなくなります。 CSSサンプルは以下の通り。 CSS * { list-style: none; margin: 0; padding: 0; line-height: 1; } div#page { width: 350
jqueryプラグインgalleriaをホームページに使ってみようと、サンプルからちょろちょろ修正してた。Firefoxで動作確認とかして最後にIEでチェックすると表示がおかしいぞと気づく。position:absoluteにしているのに位置がおかしい。 IEのバグらしい。 to-R『floatした際に背景が消える件(IE編)』(参照) IEに対して対応するには以下のような方法があります。 width:100%を指定する 親要素に対してwidth:100%を指定することにより、IEの『幅や高さを指定した要素ではボックスサイズの算出時にフロートを除外しない』というバグを発生させることができます。 親要素にwidth:100%を指定したら、ちゃんと表示された。
JavaScript による、IE 6/IE 7 の判別/判定について。 2008/06/23 00:32 JavaScript による、IE 6/IE 7 の判別/判定について。 たった 1行で、Internet Explorer (以下 IE と略す) のヴァージョンが 6 か、7 以上かを判定する JavaScript 命令として、 if (typeof document.body.style.maxHeight != "undefined") { // IE 7.0 以上 または Gecko などモダンブラウザー } else { // IE 6.0 以下 } が有用だ、という記述が各所にある。ところが、これ、大きな弱点があることに最近気付いた。 body.style なので、当然、body タグが現れるまでは使えない。ところが、多くの JavaScript 命令は、head 内に
Dean Edwards氏は7日(米国時間)、IEの動作をW3C標準仕様へ準拠させるためのライブラリIE7.jsの最新版を公開した。IE7.jsはJavaScriptで開発されたMS Internet ExplorerのHTML/CSS表示を調整するライブラリ。IE7.jsを使うことでMSIEのHTML/CSSまわりの表示処理をよりW3C標準規約に準拠したものにする。IE5やIE6で透過PNGを表示できるようにもなる。 IE7.jsは基本的にMSIE5/6向けに用意されていたライブラリをIE7に対応させたもの。これまでのモジュール構造は廃止され、IE7.jsやIE8.jsといったように個別のファイルに分離されている。ホスティング先もGoogle Codeへ変更された。IE7.jsはサイズも縮小され、圧縮した状態で11KBほど。またbase2.DOMのセレクタエンジンを使うことでより高速に動
少し時間があったので、Windows Internet Explorer 7のCSSバグを検証してみた。 IE7 を含むモダンブラウザ向けの CSS ハックまとめにうまくまとまっているが、いくつか誤りもあり、新しいCSSハックも発掘したので少し書いておきたい。 検証したのは、Window Internet ExplorerのV6/V7、Firefox 1.5、OperaのV8/V9、Safari 1.3 です。今回はサンプルを用意しないので自分で確かめてほしいのと、複雑な属性セレクタを使ったものは難しい人もいると思うのでシンプルなものに限定してみた。 また、W3C CSS validator でValidなもののみに限定しています。 Internet Explorer 7のハック 「*+html hack」(*+html bodyのハック)は、じつはOpera 8.0 以降にも適用され
IE6からIE7が今後本格的にマーケットシェアを取って行くことを考えると、IE7の仕様やバグを考えた上でのマークアップが欠かせないとは思います。でも、僕らはまだIE7がどんなものかが分からない。そのため、とりあえず* { zoom: 1;}を指定しておくことが安全策なのかもしれません。 IE7のZoom機能で、見事にこける。 先日、うちの本体のサイトを更新し終わった際に、スタッフから「あれ、しゃらくのサイトずれてるよ」と指摘されました。更新箇所が多く、CSSも多少いじくったので、どこか消してしまったのかもしれません。そこで、自分のブラウザで確認するも、どうも問題が再現できない。そのスタッフのブラウザを見ると、こんな感じになっていました。 僕のFirefoxで見てみても問題ないし、そのスタッフが使っているIE7でも問題なし。「うーん」と悩んでみるものの、意外と答えは簡単なところにありました。
Internet Explorer 7 は、 8 月にも beta3 がリリースされるかも知れないんだけど、今現在、IE7 beta2 を含むモダンブラウザに有効そうだと思われる CSS ハックを自分用にまとめておく。以前に IE 7 用の CSS ハックを紹介したことがあったけど、今回の Easy CSS hacks for IE7 - Nano See, Nano Do で紹介されていたハックは、比較的シンプルかも知れない。想定ブラウザは下記のとおり。 バージョン 6 以下の IE IE7 それ以外のモダンブラウザ(Safari、Opera、Firefox) ブラウザごとのハック 全てのサンプルは body 要素を指定の対象としている。 バージョン 6 以下の IE にのみ適用 * html body サンプルページ バージョン 7 の IE にのみ適用 *+html body サンプ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く