CSS　便利な記述？（テクニック）まとめ

テーブルを使わずに画像の横にテキストを上下中央に表示
cssは↓

div.imgsample p {
	display: table-cell;
	vertical-align: middle;
	margin: 0;
}
* html .imgsample p {
	display: inline;
	zoom: 1;
}
*:first-child+html .imgsample p {
	display: inline;
	zoom: 1;
}

htmlは↓

<div class="imgsample">
<p><img src="/image/sample_01.gif" alt="" width="100" height="20" /></p>
<p>このスペースにテキスト</p>
</div>

IEで画像の元サイズよりも小さく表示した際に画質が悪くなるのを解決

img { -ms-interpolation-mode: bicubic; }

table 要素の余白を消す（これは基本的ですが必須かなあ　＾＾；）

table	{　border-collapse: collapse;　border-spacing: 0;　}

サイト全体を中央配置にする（width指定をお忘れなく　＾＾；）

margin: 0 auto;

ブラウザー事の表示が違うのを統一（margin,paddingの統一）

body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, p, blockquote, th, td	{
	margin: 0;	padding: 0;
}

もうちょっと細かくすると↓

html {
	overflow-y: scroll;
}
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6,
pre, form, fieldset, input, textarea, p, blockquote, th, td	{
	margin: 0;	padding: 0;
}
address, caption, cite, code, dfn, em, strong, th, var	{
	font-style: normal;
}
table	{
	border-collapse: collapse;	border-spacing: 0;
}
caption, th	{
	text-align: left;
}
q:before ,q:after	{
	content: '';
}
object, embed	{
	vertical-align: top;
}
hr, legend	{
	display: none;
}
h1, h2, h3, h4, h5, h6	{
	font-size: 100%;
}
img, abbr, acronym, fieldset	{
	border: 0;
}
li	{
	list-style-type: none;
}

IE6でレイアウトがすれる場合のハック

* html div	{
	background: #000;
}

IE7でレイアウトがずれる場合のハック

*:first-child + html div	{
	background: #000;
}

ついでに、IE8が出たんで今更いろいろ手を加えるのが面倒なときは・・

meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" /

これで、IE7と同じ表示にしてくれます。
（あっ、これはメタタグに挿入です。テキストの最初と最後に<>を入れるのをお忘れなく）

posted by そば富泉