TopCSS > 2011年3月
2011年3月 2日

Google Chromeでfloatレイアウトが崩れる件について

March 2,2011 1:55 AM
Tag:[, , ]
Permalink

Google Chromeでfloatレイアウトが崩れる事象が発生しました。

Google Chromeでfloatレイアウトが崩れる事象

かなりレアケースと思われますが、備忘録として以下に詳細を残しておきます。

1.サンプル

サンプルはdl/dt/dd要素を使ったfloatレイアウトで、コメントフォームを想定しています。

(X)HTML(赤色が対象部分)

<?xml version="1.0" encoding="euc-jp"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ja" xml:lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=euc-jp" />
<link rel="stylesheet" href="style.css" type="text/css" />
<title>test</title>
</head>
<body>
<div>
  <form method="post" action="hoge.cgi" name="comment_form" id="comment_form">
    <dl>
       <dt>名前:</dt>
       <dd><input id="author" name="author" size="20" value="" /></dd>
       <dt>メールアドレス:</dt>
       <dd><input id="email" name="email" size="30" value="" /></dd>
       <dt>URL:</dt>
       <dd><input id="url" name="url" size="30" value="" /></dd>
       <dt>コメント:</dt>
       <dd><textarea id="comment" name="comment" rows="5" cols="30">Please comment.</textarea></dd>
    </dl>
  </form>
</div>
</body>
</html>

CSS(すべて対象)

* {
    margin: 0;
    padding: 0;
    font-family: Verdana, Arial, sans-serif;
}
dl {
    margin: 10px;
}
dt {
    float: left;
    width: 120px;
    padding: 5px 5px 5px 0;
    text-align: right;
}
dd {
    padding: 5px 0 5px 8px;
}
input,textarea {
    font-family: "Osaka", "ヒラギノ角ゴ Pro W3", "MS Pゴシック", arial, sans-serif;
}

このサンプルは、Firefox 3.6.13では次のように期待通り表示されます。

Firefoxでの表示

2.問題点

冒頭の画像と同じですが、Google Chrome(9.0.597.107)では次のようにレイアウトが崩れます。

Google Chromeでの表示

form要素にfieldset要素を挿入しても事象は変わりません。

3.事象の詳細

レイアウト崩れは、以下の条件を満たしたときに発生することを確認しています。

  1. 文字エンコーディングがEUC-JP
  2. 全称セレクタにmargin/padding/font-familyを設定
  3. dt要素セレクタにpaddingを設定(topまたはbottomに0以外を同時に指定)
  4. input要素セレクタにfont-family、値に「MS Pゴシック」を設定

例えば次の条件であればこの事象は発生しません。

  • 文字エンコーディングがUTF-8である場合
  • 全称セレクタにあるmargin/padding/font-familyのいずれかひとつでも欠けている場合
  • dt要素セレクタのpadding-topまたはpadding-bottomのいずれかが0を設定、または設定されていない場合

4.対処

3項の1~4の条件をひとつでもはずせば問題は解消します。3項の条件を満たす必要がある場合でも、dd要素にいわゆるclearfixを設定すれば問題は解消されるようです。

(X)HTML

…前略…
<div>
  <form method="post" action="hoge.cgi" name="comment_form" id="comment_form">
    <dl>
       <dt>名前:</dt>
       <dd class="clearfix"><input id="author" name="author" size="20" value="" /></dd>
       <dt>メールアドレス:</dt>
       <dd class="clearfix"><input id="email" name="email" size="30" value="" /></dd>
       <dt>URL:</dt>
       <dd class="clearfix"><input id="url" name="url" size="30" value="" /></dd>
       <dt>コメント:</dt>
       <dd class="clearfix"><textarea id="comment" name="comment" rows="5" cols="30">Please comment.</textarea></dd>
    </dl>
  </form>
</div>
…後略…

CSS

…前略…
.clearfix:after {
    content: "";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}
.clearfix {display: inline-table;}
/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */

Google Chromeでの解消後の表示は次のようになります。

Chromeでの解消後の表示

ちなみに、この事象が発生したのは文字エンコーディングがEUCのFC2ブログです。本問題について認識誤り(clearfixはそもそも必要など)等ありましたらご指摘頂ければ幸いです。

Comments [4] | Trackbacks [0]
Now loading...
Recent Entries
ギターに入った猫
掲載広告募集
Styles
Font Size
Default
For defective color vision
Gray Scale
RGB Color
Search this site

このブログをメールで購読する by:FeedBurner

AMN
Categories
Monthly Archives
2021年
2020年
2019年
2018年
2017年
2016年
2015年
2014年
2013年
2012年
2011年
2010年
2009年
2008年
2007年
2006年
2005年
2004年
2003年
BlogPeople
Syndicate this site
FeedBurner(RSS1.0/RSS2.0/Atom)
Counter
これまでのアクセス
Powered by
Movable Type 6.0.3