トリビア・ライフ - 天狼記

世の中の至る所にあるトリビア(主にPC上での物創りトリビア、生活トリビア)を発見する生活日記

カレンダー

ブログ内タグ検索

カウンター

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
はじめてのGoogle Chrome
作成したブラウザテンプレートをGoogle Chromeで見てみると記事が表示されない!
うぉ!っと思い解析をしました。どうもfloatとoverflow併用時にブラウザで回り込みに関して微妙に解釈順番が異なるようです。⇒ブログ作成(ブログランキング)
Legendテンプレートの特徴の一つである日付表示についてですが、下記のようにfloatを用いて3つのエリアを構成していてその下に記事が続く構成になっています。



現状のテンプレートですとIE, Firefoxでは正常に表示されますが、Google Chromeですと記事だけが表示されません。何でだろう?とCSSをみなおしてみたものの特に変なコードはなかったので一番怪しそうな

overflow: hidden

を消してみると表示されます!このことを手掛かりにサンプルで簡単なhtmlを作成してみて試してみた所、どうもfloatとoverflow併用時にブラウザで回り込みに関して微妙に解釈順番が異なるような気がしてきました。

推測なのですが、IE, Firefoxでは、

#index .entry-header { width: 470px; }
#index .entry-date {
	float: left;
	width: 35px;
	height: 63px;
	background: #3c3c3c;
	color: #ffffff;
	font-family: Arial, Verdana, sans-serif;
	font-size: 0.7em;
	text-align: center;
}
#index .entry-month, #index .entry-year { height: 20px; line-height: 20px; }
#index .entry-day {
	height: 25px;
	font-size: 2em;
	font-weight: bold;
	line-height: 25px;
}
#index .entry-title {
	float: left;
	width: 434px;
	height: 40px;
	border-width: 0 1px 0 0;
	border-style: solid;
	border-color: #d1d1d1;
}
#index .entry-category {
	float: left;
	width: 434px;
	height: 22px;
	border-width: 0 1px 1px 0;
	border-style: solid;
	border-color: #d1d1d1;
	font-size: 85%;
	text-indent: 8px;
	line-height: 22px;
}
でその後に続く記事のCSSが
#center .entry-body {
	overflow: hidden;
	border-width: 0 1px;
	border-style: solid;
	border-color: #d1d1d1;
	font-size: 93%; /* 12px */
}
の場合、ブラウザの解釈順番として

IE, Firefoxの場合

幅472pxの中で日付(.entry-date)、タイトル(entry-title)、カテゴリ(.entry-category)の各classを順番に表示する
その後記事(.entry-body)を表示しようとするが、幅472px内に表示しきれず回り込んでから表示して、表示した内容がoverflowしていれば表示しない(hidden)するという処理になっているようです。

Google Chromeの場合

幅472pxの中で日付(.entry-date)、タイトル(entry-title)、カテゴリ(.entry-category)の各classを順番に表示する
その後記事(.entry-body)を表示しようとするが、float指定されていないため1の更に横に表示しようとする。(下図のイメージです)



結果、幅472pxで回り込む前にoverflow: hiddenが適用されるために記事が表示されない結果となります。

まとめると、

floatで指定した後の要素に対してのoverflowの処理について

・IE, Firefoxは、表示内容の回り込み処理を行ってからoverflowを適用する
・Google Chromeは、overflowを適用してから表示内容の回り込み処理を行う
※overflow: hiddenでは表示内容がないため回り込み処理を行わない

という解釈順番が異なるようです。

まぁ、CSSの記述漏れなので直し方は下のように回り込み処理を解除するclear: both;を指定すれば良いでしょう。
IE, Firefox, Google Chrome何れも正常に表示されたのでおそらく原因は推測通りかなぁっと。

修正前
#center .entry-body {
	overflow: hidden;
	border-width: 0 1px;
	border-style: solid;
	border-color: #d1d1d1;
	font-size: 93%; /* 12px */
 
}
修正後
#center .entry-body {
	clear: both;
	overflow: hidden;
	border-width: 0 1px;
	border-style: solid;
	border-color: #d1d1d1;
	font-size: 93%; /* 12px */
}

コメント

このコメントは管理人のみ閲覧できます

コメントの投稿

   管理者にだけ表示を許可する
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。