IE 6とIE 7のためのCSSハック16選（1/3） - ＠IT
有限会社タグパンダ 喜安 亮介 2009/11/17 Webブラウザごとのレンダリングエンジンの違いにより起こるレイアウトの表示ずれ問題に泣かされるWebデザイナのために、Webブラウザごとに使えるかどうかの表を交えながら問題を解決するためのCSSハック＆フィルタTipsをお届けします（編集部） Webブラウザ別CSSハック一覧表 前回の「IE 6で泣かないための、9つのCSSハック」では、仕様通りの正しいコーディングを行っているにもかかわらず、Internet Explorer（以下、IE） 6で見ると、レイアウトがズレてしまうなどのさまざまな問題を解決するための9つのテクニックを紹介しました。 今回は、IE 6とIE 7のためのCSSハックのテクニックを下記に分けて紹介します。 IE 6をハック（IE 6のみに効く、もしくはIE 6のみに効かないハック） IE 6のみに効くハック スタ
IE共通の9つのCSSバグをそれぞれ解決する方法:phpspot開発日誌
IE共通の9つのCSSバグをそれぞれ解決する方法がNettutsにて紹介されています。 どれも、なんでだろうと頭を悩ましそうな問題なので解決法を知っておくと簡単に対処できそうです。 1. センタリングが効かない問題 margin: auto を指定した場合の期待する結果 IEの場合以下のようになりますが↑にするための解決法が書かれています 2. 横に並べたいリストが階段状になってしまう IEの場合以下のようになってしまいますがこの解決法も記載されています 3. ダブルマージンフロートバグ マージンの指定が期待通りに出ている例 ↓ IEの場合、margin: 30px 0 0 30px; で定義した値が正しく適用されない例も解決法があります 4. heightの高さ指定が効かないバグ height:2px を指定した場合の想定する表示 IEはなぜか2pxにならないのでこれも解決法が示されて
TRANS - * { magin: 0;}だけでは物足りない！zoom: 1;を使おうよ！
IE6からIE7が今後本格的にマーケットシェアを取って行くことを考えると、IE7の仕様やバグを考えた上でのマークアップが欠かせないとは思います。でも、僕らはまだIE7がどんなものかが分からない。そのため、とりあえず* { zoom: 1;}を指定しておくことが安全策なのかもしれません。 IE7のZoom機能で、見事にこける。 先日、うちの本体のサイトを更新し終わった際に、スタッフから「あれ、しゃらくのサイトずれてるよ」と指摘されました。更新箇所が多く、CSSも多少いじくったので、どこか消してしまったのかもしれません。そこで、自分のブラウザで確認するも、どうも問題が再現できない。そのスタッフのブラウザを見ると、こんな感じになっていました。 僕のFirefoxで見てみても問題ないし、そのスタッフが使っているIE7でも問題なし。「うーん」と悩んでみるものの、意外と答えは簡単なところにありました。
CSSでfloatを指定したボックスを含むボックスの背景が出なくなる件 - Fsiki
「CSSで段組したらFirefoxで背景が出ねーよっ」て話をよく聞くので色々試してみました。 コンテンツメニュー 元になるHTML 特に何も考えずfloatを使った場合 外のボックスに幅を与えてみる 一般的な解決方法 その他の解決方法 overflowを使う 最終回答 番外編 更新履歴 このドキュメントについて 元になるHTML <div id="container"> <div class="leftBox">内容</div> <div class="rightBox">内容</div> </div> 例1(ブログ) class="leftBox"のボックスの内容は「サイドバー」。class="rightBox"の内容は「記事部分」。 例2(ウェブサイト) class="leftBox"のボックスの内容は「ローカルナビゲーション」。class="rightBox"の内容は「情報」。 例3
インライン要素にwidthとheightを指定して、無視されるとき／されないとき - 以下斜め読んだ内容
update:2008.3.12 ノートにあとで調べるとしておきながら半年以上放置 調べたら「非置換インライン要素」がわかった。以下まとめ。 インライン要素は二種類に分類できる。 「置換要素」 「非置換インライン要素」 この二つの違いはcssでwidth、heightを指定したときに適用される／されないで確認できる。 仕様では・・・、widthとheightが指定できるインライン要素 ５つある。このタイプのインライン要素を「置換要素」と呼ぶ img要素 input要素 object要素 select要素 textarea要素 button要素 仕様では・・・、widthとheightが指定「できない」インライン要素 これらを総称して「非置換インライン要素」と呼ぶ。 「置換要素」以外の全てのインライン要素 span要素とか。 じゃあ実装では置換要素と非置換インライン要素はどうなる？ 仕様通り
【〜】チルダと【＼】バックスラッシュと【￥】
チルダ（チルダー）（~）やバックスラッシュ（）について ■チルダの入力方法 「チルダ（チルダー）が出ない！」って困ったことがありませんか？ これは日本の標準的なパソコンでよくある事で、インターネットをする時、初心者が困ってしまいます。 パソコンの機種にもよりますが、カナの「わ」のところにある【 〜 】ではなく、カナの「へ」のところにある【 ￣ 】を使います。 機種によっては、ここが【 〜 】になっているものあります。 これは日本のコンピュータの規格による結果です。 以下のようにホームアドレスが異なる表示をしても同じアドレスなので気にしないでください このときの【 ~ 】（チルダ）は、LINUX（リナックス）などUNIX（ユニックス系）のOSを使用したサーバーにおいてユーザーに割り当てられたホームディレクトリを表記しています。 上記の例ならユーザー名が hoho さんですね
バックスラッシュを入力したい:Windows(ウィンドウズ)の使い方
バックスラッシュの入力方法 バックスラッシュというのは「＼」（逆向きのスラッシュ）で、これの半角版を入力するにはどうすればいいのか？というご質問です。 ▼操作手順：半角のバックスラッシュを入力する ※「Arial」フォントを使って入力する例 フォントを「Arial」に設定 ↓ 日本語入力（IME）が、Offの状態でキーボードの「ろ」キーを押す バックスラッシュの入力は、文字コードとフォントの関係によって生じている問題です。 「005C」というコードを欧文フォント（英数字用フォント）では半角の「＼」という形で表示させていますが、和文フォント（日本語用フォント）では半角の「￥」という形で表示させることにしてしまったので、和文フォントを使うかぎり半角のバックスラッシュを入力できないのです。 そのため↑ではフォントに代表的な欧文フォント「Arial」を指定することで、半角のバックスラッシュを表示さ
スタイルシート（CSS） » CSSハック » CSSハック | PHP & JavaScript Room
PHP、JavaScript、CSS、Webページ埋め込みによる音声・動画配信方法など、実用的なプログラミング・テクニックを解説Netscape 4、IE4を除外 Netscape 4 を除外 link要素のmedia属性に、screen以外を指定するとmedia属性をサポートしていないNetscape4を除外できます。 <!-- link要素のmedia属性に、screen以外を指定 --> <link rel="stylesheet" type="text/css" href="style.css" media="all" /> <link rel="stylesheet" type="text/css" href="style.css" media="screen,tv" /> Netscape 4 と IE4 を除外 Netscape 4 および IE4 では@impor
CSSハックってなんぞえ？ - Webデザイナーの為の情報Blog「CSSMAKER」
ちゃんと勉強してちゃんとマークアップしてるはずなのに、ブラウザによって表示に違いが出てしまう；； なんて事がWeb制作してるとたくさんあります。 ってか無い時のが少ない＞＜ 特に日本だとIE6の普及率が異常に高いです。 他のブラウザ（IE7とかFirefoxとかOperaとかSafariとか）に比べるとIE6はWeb標準への準拠度が比較的低い為、ちゃんとマークアップしても色々と問題が起きてしまいます。 IE6だけでなく他のブラウザも多少問題を持ってます。 そんなバグに出会った時、各々のブラウザにのみ対応したCSSを分けて記述出来たら便利だと思いませんか？ それがCSSハックです。 CSSハックの多くは各々のブラウザのバグを利用して適用させたいブラウザのみ（または適用させたくないブラウザをはじく）事で問題が起きたブラウザへのCSSの対処を実現させてはいますが、あくまでバグを利用しての
CSS ハックまとめ Lucky bag::blog: 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 サンプ
RedLine Magazine : 気になった初期化CSS
気になった初期化CSS コリスさんの記事でブラウザのデフォルトスタイルを初期化するCSSのサンプルが多数掲載されていました。 >> [CSS]ブラウザのスタイルを初期化するスタイルシートのサンプル集 | コリス 初期化する内容やどこまで初期化しておくのかは案件ごとのデザインなどによってケースバイケースだったりして、完全にこれが私のリセットCSSですと言えるものはないのだけれど、それなりにいつもだいたい使いまわしている自分のリセット部分のソースと見比べて考えてみた。いろいろと拝見して気になったものが2つあったのでメモ。 select option に paddingを指定する 予めブラウザのデフォルトスタイルを全称セレクタ（*）なんかで一気にpaddingを0に指定してしまうと、Fxなどの一部のブラウザでだけのようだけど、selectのoptionの右端が下向き矢印マークで隠れてしまうことが
IE6 の float 指定した時の margin バグ回避策 はじめてのブログデザイン
覚え書きです。 CSS でブロック要素に float を指定した際 margin の auto が効かなくなる（左右のセンター揃えが効かなくなる）ので px などでキッチリと指定します。 しかし、IE6 のバグで float を指定した際の margin が2倍になってしまうバグがあります。 なので、IE6 用の有名な CSS ハック（*html）を使用して以下のように回避します。 *html div#hajime { /*IE6用のハック*/ width : 450px; float : left; margin : 10px 5px; /*通常指定の1／2で指定*/ } div#hajime { /*その他のブラウザ用*/ width : 450px; float : left; margin : 10px 10px; } ●結論 IE6 はフロート食べると太るから margin は半
Hollyハック(バックスラッシュハック) - CSS Hack Lab
Mac IE5のみCSSを適用・除外させるCSS Hack、「Hollyハック」（バックスラッシュハック）を紹介！ Hollyハック（バックスラッシュハック） CSS Hack Labトップ CSS Hack ライブラリー CSS Hack コラム CSS Hack 資料室 CSS Hack Lab > CSS Hack ライブラリー > Hollyハック(バックスラッシュハック) CSS Hack Labは現在、製作段階のWEBサイトです。製作途中のページやリンク切れ等が多数存在します。 また、テスト等をしっかりと行っていない部分もまだ存在します。 なお、ページ移動も頻繁にしていますので、URLは何度も変わる可能性があります。 以上のことを理解の上でサイトを観覧してください。 Hollyハックとは・・・ Hollyハック（バックスラッシュハック）（Holly Hack , Back Sl
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
http://d-lover.com/css/hack.shtml
worldending.jp
透過PNGをCSSで背景に指定してIE6や5.5のバージョンでも綺麗に表示してみる - DesignWalker
http://www.stylish-style.com/csstec/base/usercss.html