clearfix のアレンジ版作ってみました - understandard
Firefox 3.6 が clearfix の影響で margin-bottom が margin-top にもかかるという話を聞いて、普段使ってた clearfix で試してみたところ、同様の現象が出たので、対応版を作ってみました。 追記（2012年2月7日）: 公開当初のコードでは問題があったので、最後に追記しました。 ネタ元の記事は以下。 firefoxでmargin-bottomがmargin-top | 乱雑モックアップ この記事で紹介されていた clearfix は以下ようなもの。 僕はこの指定から height:0; を抜いたものを使っていました。 .clearfix:after{ content: ''; display: block; clear: both; height: 0; } .clearfix{ /zoom: 1; } この記事の公開時点（2012年2月1日
hasLayout メモ - understandard
IE7に付いたズーム機能を使って拡大・縮小したときに body に指定した背景画像が拡大・縮小されず、理由が分からず困ったことがありました。 「原因は haslayout の値が false になっているから」 隣にいた同僚にそう教えてもらってなんとかズーム機能に対応はできましたが、今後同様の事例が出た時に困らないようにメモ。 で hasLayout って何？ hasLayout は IE 独自のプロパティで、各要素がレイアウト情報を持っているかどうかを示すもののようです。 上に書いた背景画像の拡大・縮小時のバグは hasLayout プロパティの値が false になっている場合に起こるそうです。 その他のバグの情報は Microsoft の Internet Explorer 7におけるズーム機能の問題 ( http://support.microsoft.com/kb/933053/
TRANS - * { magin: 0;}だけでは物足りない！zoom: 1;を使おうよ！
IE6からIE7が今後本格的にマーケットシェアを取って行くことを考えると、IE7の仕様やバグを考えた上でのマークアップが欠かせないとは思います。でも、僕らはまだIE7がどんなものかが分からない。そのため、とりあえず* { zoom: 1;}を指定しておくことが安全策なのかもしれません。 IE7のZoom機能で、見事にこける。 先日、うちの本体のサイトを更新し終わった際に、スタッフから「あれ、しゃらくのサイトずれてるよ」と指摘されました。更新箇所が多く、CSSも多少いじくったので、どこか消してしまったのかもしれません。そこで、自分のブラウザで確認するも、どうも問題が再現できない。そのスタッフのブラウザを見ると、こんな感じになっていました。 僕のFirefoxで見てみても問題ないし、そのスタッフが使っているIE7でも問題なし。「うーん」と悩んでみるものの、意外と答えは簡単なところにありました。
IEの様々なバグの真相らしきもの｜CSS HappyLife
IEには様々なバグが報告されていますよね。 もうコーダーからしたら勘弁して下さいって泣きが入りそうになるくらいに... 背景色が指定された要素内でfloatがある時、要素内の文字が消えるとか、floatに後続するmarginの値が無視されるとか、widthを指定しているとボックスの中身にfloatしている要素があっても、自動的に高さが伸びるとか。 こういったIEのバグに有効な手段として、IE6まではheight:1%を指定する事で回避したり、IE7でもwidthを指定して回避したりと色々やってると思います。 その他、IE独自拡張のzoomを使った方法なんかもあります。 今まで理由とかは分からないけど取り合えず解決するんだって事で、widthやheight、zoomを指定しておけばいいんだ。 と認識していましたが、つい先日ちょっと気になる内容をみつけましたのでご紹介。 ソレはhasLayou
[CSS]IEのhasLayout関連のバグと解決方法をまとめたサイト -hasLayout.net
IE6/7/8のhasLayoutが原因でおきるスタイルシートのバグとその解決方法をまとめたサイトを紹介します。 hasLayoutについては、以前のエントリで紹介しているので参照ください。 IEでのCSSのバグを回避するhasLayout hasLayout.net バグは現在、IE6(44個)、IE7(28個)、IE8(19個)登録されており、各ページにバグの解説、バグが生じるデモページ、バグの解決方法とそのデモページなどが掲載されています。 IEのCSS Bugs一覧表の一部 また、CSSのチュートリアルでは、IEの便利なトリックも掲載されています。 CSS Tutorial 例えば、下記のようにIEでクリックした際に生じる点線は、他の箇所をクリックしないと消えないため、クリック後しばらくして消したり、元から表示させない方法などが紹介されています。 クリック時に生じる点線の処理方法
ウノウラボ Unoh Labs: hasLayoutとは何か
yamaokaです。 CSSに携わっている方なら、Holly hackを使ったことがあるかもしれません。 /* Hides from IE5-Mac \*/ * html .foo { height: 1%; } /* */ Internet Explorer（以下IE）で、レイアウトに問題のある要素に 上記のようなスタイルを指定をすると、 あら不思議、まともな表示がなされるというものです （上記のままではIE7に対応していませんが…）。 さて、どうしてレイアウトが意図したとおりに行われるようになるのでしょうか。 IEのhasLayoutプロパティ IEでは、全ての要素が 「hasLayout」という読み取り専用のプロパティを持っています。 これはそれぞれの要素がレイアウト情報（＝要素の幅・高さなどに関する属性情報）を 保持しているかどうかを示す値で、 デフォルトの状態では「hasLayo
ie7の「ページの拡大」によるレイアウト崩れは「letter-spacing」で回避できる？:WebClip - ウェブのニュースと Second Life (セカンドライフ) - CNET Japan
[みんなのお題]ie7の「ページの拡大」によるレイアウト崩れは「letter-spacing」で回避できる？ 公開日時： 2008/01/09 01:40 著者： ミキ・オキタ この記事のトピック Internet Explorer 7「ページの拡大」機能でレイアウトが崩れる 「letter-spacing」で「ページの拡大」時のレイアウト崩れを回避 Internet Explorer 7「ページの拡大」機能でレイアウトが崩れる こんにちは。“時代の3歩先をねらうWeb屋さん”ミキ・オキタです。 このブログ「WebClip ウェブデザインのニュース」では、Webデザイン・Webマーケティングの話題をお届けしている。 今回は、Web制作者にとって悩ましいブラウザの問題のひとつ、Internet Explorer 7の「ページの拡大」機能によるレイアウト崩れの回避方法について。 僕
hasLayoutプロパティがtrueで発生するバグ - Webtech Walker
hasLayoutがfalseのときに起こるバグは多数ありますがここでは触れません。hasLayoutプロパティをtrueにするにはwidthやheightを指定する方法の他に、IE独自実装の「zoom」を使うことも多いです。下記のように「zoom:1」と指定すれば、他のレイアウトに害が少ないからです。 div#foo { zoom: 1; } ただし、この「zoom」はW3CのCSSバリデータでエラーになるのでそれが嫌な人は使わないほうがいいかもです。 hasLayoutプロパティがtrueのときの問題点 では本題です。hasLayoutプロパティがtrueのときに、以下のようなバグが発生します。 IEでリストマーカーが壊れる IE7のズーム機能で拡大、縮小した際に文字が重なる IEでリストマーカーが壊れる これはul,ol,liのhasLayoutがtrueだとリストマーカーが壊れます
IE7のズーム機能でバグる - hasLayoutとは | Takazudo Clipping*
IE7のズーム機能を使うと、ラジオボタンやチェックボックス、文中に入れた画像がおかしくなります。こんな風に。 <input type="radio" />ウェブ全体から検索 <input type="checkbox" />日本語のページを検索 <img src="/clip/cmn/img/entry-bg-01.gif" />オマケ IE7のズームで崩れるサンプル これを直す方法。 IE6までは、問題のある要素にheight:0を指定するという、holly hackと呼ばれるバグ対処方法で、数々の問題のあるバグが解決されてきました。IE7になっても、コレに変わり、min-height:0を指定すれば直るじゃん！と思ってました。 しかし、その方法でもこれは直らない・・・。他のズーム機能のあるブラウザではこんなこと起こらないのに、どうすればいいか到底見当もつかない・・・ひどすぎるIE7・・
Zudolab -
The Search for a Trusted 메이저사이트: A World of Thrills, Security, and Immersive GamingdErsPOId - December 1, 2023In the dynamic world of online entertainment, the quest for finding a trustworthy 메이저사이트, or major site, is akin to navigating through a labyrinthine digital jungle. Much like the adventurers of old scouring for hidden treasures, modern-day netizens are on the lookout for that one platform
【CSS - zoom:1 - ★★★】 - hasLayout問題を解決するzoom:1;の落とし穴 ― Like@Lunatic
IEのヘンテコなCSS解釈の原因と言われるhasLayoutプロパティ。 どうやらこのhasLayoutプロパティの値がfalse（デフォルト値）の場合に、いろいろとまずいことが起こるようです。IEだけfloatした要素周辺のmarginやpaddingがおかしかったり、相対配置/絶対配置した要素がどこかに消えてしまったりする・・・という経験はcssレイアウトの際に誰もがぶつかる問題です。 また、hasLayoutがTrueとFalseの要素が混在している場合には、IE7のズーム機能を利用した際に、隣あった要素が重なってしまったりします。 この辺はコリスさんのIEでのCSSのバグを回避するhasLayoutに分かりやすい説明があります。 このhasLayoutの問題を解決するためにzoomプロパティが利用されることがあります。（zoomプロパティはIEの独自拡張であるため、これを使うこと自
IEでのCSSのバグを回避するhasLayout | コリス
IE7で拡大・縮小時にレイアウトが重なってしまったり、IEでフロートした要素がはみ出てしまったりとIE独自のCSSのバグがいくつかあります。 これは、IEのhasLayoutが原因のひとつとなっているので、それを回避する方法を考察します。 hasLayoutとは IEでのCSSのバグを回避するhasLayoutの値 CSSのバグに効果のあるhasLayoutの指定方法 hasLayoutの参考ページ hasLayoutとは hasLayoutとは、オブジェクトがレイアウトを持っているかどうかを示すものです。 hasLayoutの値はread-onlyのため読み込みのみ可能で、falseとtrueがあります。 hasLayoutの値（read-only） false デフォルト値。 オブジェクトがレイアウトを持っていない。 true オブジェクトがレイアウトを持っている。 IEでのCSSのバ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
