‘CSS’ タグのついている投稿

IE6とIE7にのみhackをかける

2009 年 10 月 15 日 木曜日

IE6とIE7にhackを行う場合、プロパティの前にバックスラッシュをつけるとIE6とIE7にハックが可能

ieのみ読み込むcssを作成し

#sample{
width: 100px;
/width: 90px;
_width: 80px;
}

と使えば、IE8, IE7, IE6と段階的に適用させる事が可能。

このエントリーを含むはてなブックマーク

CSSのoverflowでIEのみテキストがはみ出る問題

2009 年 10 月 15 日 木曜日

CSSでheightを指定し、overflowを指定した場合、IEのみheightからはみでる場合がある。
これは、子要素にposition: relative;を使用していた場合に発生する。
この場合、親要素にもposition: relative;を指定してあげると、上手くいく場合が多い。

このエントリーを含むはてなブックマーク

携帯サイトでphpファイルにするとXHTML/CSSが適切に表示されない場合

2009 年 9 月 25 日 金曜日

1.エミュレーター上では問題ない。
2.htmlファイルで実機確認すると、きちんとXHTML/CSSが表示される

…にも関わらず同じソースをphpファイルにすると、きちんと表示されない場合がある。
この場合、.htaccessのAddTypeにhtmlは指定しているが、phpが指定されていないケースがある。

AddType application/xhtml+xml .htmlを試しにAddType application/xhtml+xml .phpに変更してみると、正常に表示されるケースが多い。

このエントリーを含むはてなブックマーク

Safariのみ適用するCSSハック

2009 年 5 月 13 日 水曜日

Safariのみ適用するCSS hackは幾つかあるが、Windows Safariでも確認できるのが
html[xmlns*=""] body:last-child #name{}

このエントリーを含むはてなブックマーク

IE8のみ適用するCSSハック

2009 年 5 月 13 日 水曜日

正式リリースされたIE8のCSSハック。


#name p{
padding: 2px;
}

html>/**/body #name p{
 padding /*\**/: 1px 1px 1px 1px\9;
}

IE TESTERのIE8でも確認可能。

このエントリーを含むはてなブックマーク

IE7のみ適用するCSSハック

2009 年 5 月 12 日 火曜日

#name{
すべてのブラウザに適用するハック
}

*:first-child+html #name {
IE7のみに適用するハック
}

IE8が正式リリースされたが、商用サイトでIE全体の3%~5%、WEB系情報サイトでIE全体の8%~10%程度。ブラウザ全体では2%~8%程度。まだまだ、[Internet Explorer 8のデザイン崩れを回避するメタタグ]でIE7に落とした方が安全かもしれない。

このエントリーを含むはてなブックマーク

JQueryを使ったフォントサイズ変更はInternet Explorer6(IE6)では正常に動作しない場合が多い

2009 年 5 月 11 日 月曜日

以前紹介した、ページが遷移してもフォントサイズが変更されないサイトを作る方法は、様々なサイトで紹介されているが、Internet Explorer 6(IE6)では正常に動作しない場合が多い。

原因は不明(調査中)

このエントリーを含むはてなブックマーク

Internet Explorer 6でCSSデザイン崩れが起きやすい原因

2009 年 5 月 11 日 月曜日

今更の確認。

IE6はborderまで含めた幅をwidthとして解釈する事を前提に構築する必要がある。
標準準拠や後方互換という事によるモノ。

例えば…
width: 960px;
border: solid 1px #000000;

とした場合、IE7未満以外ではコンテンツ幅は960pxのままだが
IE6以下では958pxが実寸のコンテンツ幅となる。

IE6でデザイン崩壊を起こす(floatが下に回り込むなど)は、このパターンが多い。

参照
ADP: IE6のwidth解釈バグ対処法

このエントリーを含むはてなブックマーク

Firefoxでfloatとaリンクでクリック時に横に線が延びるのを消す方法

2009 年 5 月 9 日 土曜日

Firefoxでfloat&aタグの組み合わせではリンクをクリック時(a:active)に、横に点線が表示されてしまう。特に問題がないが、これを消すにはoutline:noneを指定してやれば良い。

ただし、この方法だと、クリック時に画像まわりの点線も消えてしまうので、デザイン上、どちらが良いか選択する必要あがる。
なお、どうしても画像まわりに点線を出して綺麗に表示したい場合は、widthとheightを指定し、overflow:hiddenかdisplay:noneとの組み合わせで表示させるのがベター。

このエントリーを含むはてなブックマーク

overflow:autoとul+liはIEで微妙

2009 年 5 月 8 日 金曜日

高さ固定でインラインフレームのように見せるのがoverflow:autoだが、中にul+li(リストアイテム)で構成すると、表示が微妙になる場合がある。状態はfloatのような感じ。
根本的な解決方法は不明だが、pタグなどに変更すれば、暫定的に解決できる。

このエントリーを含むはてなブックマーク