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は↓

このスペースにテキスト

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 そば富泉

Categories: その他

IE(インターネットエクスプローラー)バージョン8以下でご覧の場合、
コメント投稿欄表示に時間がかかる場合がございます

コメント(Facebook・Twitter・WordPressアカウントでもコメントできます)

  • このブログの記事を検索する

  • アーカイブ

  • ソーシャル