これからのclearfix(クリアフィクス)はこれで。 | MJ-WAVE.COM
今までずっと使用してきたクリアフィクス。 こちらの記事によると、もうあんなにプロパティ書かなくていいっぽい。 ちなみに今まで書いてたのはこんな感じ。 .clearfix:after { content: ""; display: block; height: 0; clear: both; visibility:hidden; } .clearfix { zoom: 1; } content: “.”; ってあるけど、これはNetScape用の記述だったらしく、今はもう必要ないかも。 ってことで新しいclearfixはこれでいい。 .clearfix:after{ content: ""; display: block; clear: both; } .clearfix { zoom:1; } いくらかシンプル。 でもzoomプロパティはcss3のバリデータで引っかかるんだよね。 ん〜IE
IE 6で泣かないための、9つのCSSハック (1/3) - ＠IT
有限会社タグパンダ 喜安 亮介 2009/10/8 Webブラウザごとのレンダリングエンジンの違いにより起こるレイアウトの表示ずれ問題に泣かされるWebデザイナのために、Webブラウザごとに使えるかどうかの表を交えながら問題を解決するためのCSSハック＆フィルタTipsをお届けします（編集部） 最も多く使われているのに……、いや、だからこそ 多くのWebデザイナの悩みの1つは、レイアウトの表示ずれ問題だと思います。これは、各Webブラウザが採用しているレンダリングエンジンの違いから起因している場合が多いです。その中でも、最もWebデザイナ泣かせのWebブラウザなのは、マイクロソフトが開発しているIE（Internet Explore）のバージョン6です。 IE 6は、発売開始当初のWindows XPにデフォルトでインストールされていたWebブラウザということもあり、世の中の多くのユーザー
CSS Differences in Internet Explorer 6, 7 and 8 — Smashing Magazine
One of the most bizarre statistical facts in relation to browser use has to be the virtual widespread numbers that currently exist in the use of Internet Explorer versions 6, 7 and 8. As of this writing, Internet Explorer holds about a 65% market share combined across all their currently used browsers. In the web development community, this number is much lower, showing about a 40% share. The inte
Firefox 1.0, 1.5, 3.0 用の CSS ハック | ヨモツネット
概要 Firefox 1.0 以降用, Firefox 1.5 以降用, Firefox 3.0 以降用の CSS ハックの手法とその仕組みの説明です。 動作確認用の demo 説明 複数のセレクタに同じ宣言を共有する場合、h1, h2, h3 { font-style: bold } のようにセレクタをカンマで区切ってグループ化 (Grouping) することができます。 しかし、グループ化したセレクタ群の中に、Web ブラウザが未対応のセレクタが一つでも含まれている場合、グループ化した別のセレクタも無効化されてしまい、グループ化した全てのスタイルが適用されなくなります。 例えば、h2, p:first-child { font-weight:bold } のように宣言した場合、h2 要素と最初の子要素の p 要素が太字でレンダリングされます。しかし、IE 6 では :first-chi
css-eblog.com - このウェブサイトは販売用です！ - css eblog リソースおよび情報
This webpage was generated by the domain owner using Sedo Domain Parking. Disclaimer: Sedo maintains no relationship with third party advertisers. Reference to any specific service or trade mark is not controlled by Sedo nor does it constitute or imply its association, endorsement or recommendation.
IE6問題に対処する10のテクニック | エンタープライズ | マイコミジャーナル
SitePoint: New Articles, Fresh Thinking for Web Developers and Designers 既報のとおり、IE6のシェアは純減を続けている。2009年2月のNet Applications調査によればIE6のシェアはFirefox 3に抜かれて3位に落ちた。今後も下落の傾向は続くとみる向きが多い。しかし、依然として19%を越えるシェアはその次のシェアを獲得している4.5%弱のSafari 3.2を大きく上回る。IE8のリリースが控えている状況ではあるが、WebデベロッパやWebデザイナは依然としてIE6対応を継続しなければならない。 IE6固有の問題を回避する方法はいくつもあるが、それらテクニックをまとめたドキュメントがSitePoint: 10 Fixes That Solve IE6 Problemsとして公開されたので注目しておき
WDE08 Blog: *htmlハック? Conditional Comments?
先日、IE Death March（http://iedeathmarch.org/）というIE6についてのブログを読んでいたとき、IE6がハマーh2やNYのツインタワーのテロの前にリリースされていることに少し驚きました。すでにリリースから８年がたち、まちがいなくIEシリーズの歴史上ブラウザとしては最も長きにわたりシェアをもっていたブラウザでしょう。 ユーザーにとってはIE６は素晴らしいブラウザであったのかもしれませんが、しかし開発者にとっては、必ずしも『素晴らしい』ブラウザではなく、開発のために夜のコーヒー杯数が増えた方も多いのではとおもいます。 最近ではCSS2.1を完全にサポートしたIE8のリリースの話も増えてきて、IE7, IE6, と事実上３つのバージョンに対して制作者は対応しなければなりません。IE6やIE7などはバグも多く修正しなければなりません。このときIEの場合はハックか
moruzo.com CSSハック
プロフィール (・´ｪ`・) 学生とクリエーターです モルゾ 最終審査を突破！無事、卒業できるみたいです。 モルゾなう (test中)ブログの色を自由自在に変えれるようになりました！ 色を変えてみる CSSハックについて調べてみました。 Internet Explorer、Safari、Firefox、Opera、Google Chromeなどさまざまなブラウザがあります。更にバージョンも様々です。全てのブラウザが同じように表示されるようにマークアップするのは難しいです。そんな時CSSハックすることで一部のブラウザのみ調節することが出来ます。■IE6に適応* html div { color:#FF0000; }div { _color:#FF0000; } IE6のみ除外#div { color /**/:#000000; }（条件分岐コメント）IE6だけに外部スタイルシートを読み込ませ
[CSS]IE6でよく遭遇する6つのバグとその解決方法 | コリス
CSS Trickのエントリーから、IE6でよく遭遇する6つのバグとその解決方法の紹介です。 IE CSS Bugs That’ll Get You Every Time ボックスモデルのバグ マージンが二倍になってしまうバグ min-width, min-heihgtと同等の指定 Stepdownバグ hover擬似クラスをa要素以外にも対応 透過PNGを透過表示に対応 ボックスモデルのバグ <textarea name="code" class="css" cols="60" rows="5"> div#box{ width:100px; border:2px solid black; padding:10px; } </textarea>
レイクって主婦でも申し込めるの？ | 現金が必要な時に一番便利なネットキャッシングで即日借入【ネポ】
レイクってよくCMでも目にするし、消費者金融を何か利用してみようかなって考えたときには候補として考えている人もいますよね。やっぱりいくら条件が良くても全く知らない消費者金融よりは、名前を知ってて利用者が多い方が安心できます。でもレイクって主婦でも申し込みできるのでしょうか？申し込める人と申し込めない人、どういう決まりになっているのでしょうか？ レイクにはもちろん申し込み条件がありますが、20～65歳までという年齢の条件があることと、きちんと収入があることの2点だけです。つまり、主婦でも収入があれば申し込むことができるんですね。主婦の収入といえばパートということになりますが、毎月きちんと収入を得ることができていれば、正社員や派遣社員などでなくても大丈夫なのです。 レイクはレディースレイクという女性専用商品を扱っています。対象が女性というのはもちろん、レイクの担当者も全員女性というもので、借り
富士通すごい。そして、letter-spacing:0でなぜ直るのかわからない | Drupal.cre.jp
CNETJapan内、WebClip - ウェブのニュースと Second Life (セカンドライフ)に、［みんなのお題］ie7の「ページの拡大」によるレイアウト崩れは「letter-spacing」で回避できる？というエントリがあった。 ※タグの関係上、タイトル表記部[]を［］にしています。 ie6,ie7では＜br /＞を無視するという致命的なバグがあるため、敬遠されていた letter-spacing を使うことで、ie7のページ拡大機能によるレイアウト崩れを防ぐことができる、という内容だ。 ※タグの関係上、brタグの ＞極端に言えば、以下の一行をスタイルシートに追加することで、Internet Explorer 7の「ページの拡大」機能でレイアウト崩れを回避することができる。(もちろん、ページ内の他の箇所でletter-spacingを使っていないことが前提) ＞サンプルソ
（有）電脳菓子工房 PSD to HTML
飲料大手 商品紹介ページ 電器大手 商品紹介ページ 通信大手 携帯アクセス制御 モック 洋酒輸入代理店 イベントサイト ポータル大手 コラムページ 不動産フランチャイズ派遣サイト 不動産会社サイト 基礎コーディング 検定サイト 学校サイト サニタリー会社サイト 税理士事務所CMSサイト OS系フォーラムサイト 等 スコープ内 HTML、XHTMLコーディング PSDデータからの画像切り出し 既存スクリプトの埋め込み スコープ外 レイヤー選択 flash制作 ビジュアル設計 システム設計 ※スコープ外の作業は主に外部制作です ターゲットブラウザ IE6,7,8,9 最新のFireFox、Opera、Safari、Chrome
IE6でよく遭遇するCSSのバグとその解決方法 | コリス
Dave Woodsのエントリー「IE6 -CSSのバグとその解決方法」から、IE6でよく遭遇する３つのCSSのバグとその解決方法の意訳です。 IE6 - CSS Bugs and Fixes Explained IE6で、マージンが２倍になってしまうバグ IE6で、hasLayoutプロパティによって起こるバグ IE6で、小さい高さを指定した場合に起こるバグ IE6で、マージンが２倍になってしまうバグ IE6で、フロートした要素のマージンが２倍になってしまうバグと解決方法の紹介です。 下記のコードで、IE6はマージンが20pxになります。 sample:バグ #navigation{ float: left; width: 200px; margin-left: 10px; } #content{ float: right; width: 500px; margin-right: 10p
IE7用のハック（*+html body）で指定したスタイルがOperaにも適用される - Webtech Walker
解決方法 そういうわけでXML宣言を入れてる場合にIE7のみ適用させたいスタイルがある場合は「*:first-child+html」を使用したほうよいです。このハックで指定したスタイルだとXML宣言の有無に関わらず、Operaには適用されないのを確認しました。 なのでIE7のみに適用させたいスタイルがある場合は以下のように書くとよいです。 body { background: blue; } *:first-child+html body { background: green; } まとめ とりあえず今回のことでわかったのは、何が起こるかわからないのでハックは極力しないほうがいいということです。当たり前のことですが、改めて思い知りました。 もしかしたら他にも要因があるのかもしれなし、Operaのバージョンによって現象がでないとかいうこともあるかもしれません。詳しく知っている方は教えてくだ
IEバグ：img要素などの置換要素を含む行の前後では、line-heightが指定した値より小さくなる
IEバグ：img要素などの置換要素を含む行の前後では、line-heightが指定した値より小さくなる 行間を指定しているにも関わらず、imgなどの置換要素が含まれると、WinIEでline-heightで指定した値より小さくなるというバグ。 line-heightの値があまり大きくなければさして気にはならないのですが、line-height:200%など多少大きめに指定している場合だと、このデザイン崩れがやっかいです。 サンプル： 行間がIE限定で狭くなります。行間がIE限定で狭くなります。行間がIE限定で狭くなります。行間がIE限定で狭くなります。行間がIE限定で狭くなります。行間がIE限定で狭くなります。行間がIE限定で狭くなります。行間がIE限定で狭くなります。行間がIE限定で狭くなります。行間がIE限定で狭くなります。行間がIE限定で狭くなります。行間がIE限定で狭くなります。
CSSハックって何だろう - Hato-Style - Note
CSSハックって何だろう CSSでレイアウトを再現する上で、ブラウザによって表示に違いが出てくる事がある。CSSの仕様通りにレンダリングしないブラウザのバグを補うため、CSSハックと呼ばれる手法を用いて様々なブラウザで表示を一致させるためのテクニックだと思っている。 とくにIEでの表示のバグを回避するために使用される物と判断される。 この間個人でサイトを作っていてWinIE5-6でバグる現象があり、どうやっても対処できなかったので、仕方が無く古いIEでの非対応プロパティ非対応セレクタ、子供セレクタと隣接兄弟セレクタ等を用いた手法で旧IEのバグ除けをした。 p{ color: red; /* IE 5-6だけ適応 */ } html>body p{ color: blue; /* IE 5-6以外のモダンブラウザだけ適応 */ } 知人にこの手法を見せたところ、「これはCSSハックじゃない」
border-collapse | A Day in the Life
統合ボーダーモデルでは、その名の通りボーダーが統合された状態で表示される。各ボーダーモデルはセル間を中心に表示されることになる。テーブル上下左右にはボーダーの半分がはみ出すので注意が必要だ。 今まで統合ボーダーモデルを選んだ時のtableにかかるborderはtableの外にかかるものだと思い込んでた（苦）気になったのでborder-collapseをcollapse（統合ボーダーモデル）、tableとtd,thのborderに1px solidのプロパティを与え、各ブラウザでどのように表示されるか調べてみた。 Win Firefox...左に1pxはみ出す Win IE6...tableの内側に表示 Mac Safari...右に1pxはみ出す Mac Firefox...左に1pxはみ出す borderに1px以上のプロパティを与えてやるとWin IE6以外のブラウザは、ボーダーの半分
スタイルシートをめぐる冒険: clearfixの決定版を作る －Mac IE編－
前回のIE編の冒頭で、私は「CSS自体の正しさとか美しさを優先し、そのためには古いバージョンのブラウザは犠牲になってもしょうがない」と書いた。その流れでいえば、マイクロソフトもサポートを打ち切ったMac版IEにそもそも対応する必要があるのか、IE編でWin版IE5.0を無視したのだから、Mac版IEも無視していいのではないか、という疑問が当然わく。至極もっともなことである。が、しかし、それで終わってしまっては本稿自体が成り立たない。しぶしぶではあるが、Mac版IE（5.x）でfloatをクリアする方法を探ってみよう。結論はもうすでに出ている。以下の通りである。 .clearfix:after { content: url(pixel.gif); display: block; clear: both; height: 0; } .clearfix { display: inline-blo
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
プロパティでのCSSハック一覧表｜web bibo
Most used CSS tricks | StylizedWeb.com
