0
私はHTML5/CSS/JavaScript学習曲線の真っ只中にあり、壁に当たっています。CSSの動作が一貫していない： 'display'と 'float' - アドバイスが必要
私の目標は、フォームを作成することです。このシンプルな作業を実行する過程で、私はFirefoxとIEで完全に表示される混乱した怪物を作成しましたが、ChromeとSafariで混乱するように見えます。私は私の問題を示すサンプルコードを書いた。ユーザー名とパスワードの2つのテキストフィールドと、ユーザーのセッション中に 'Sanford and Son'のテーマを再生するかどうかを示すチェックボックスがある3行のフォームを考えてみましょう。
<!DOCTYPE HTML>
<html>
<head>
<style>
form label{
float: left;
clear: left;
text-align: right;
margin-right: 10px;
width: 110px;
}
form input{
display: block;
margin-bottom: 5px;
padding: 0px .2em;
outline: none;
}
</style>
</head>
<body>
<form id="loginPopup">
<fieldset>
<label for="username">Username:</label>
<input type="text" id="username" name="username"/>
<label for="password">Password:</label>
<input type="password" id="password" name="password"/>
<label for="sanford">Sanford Theme:</label>
<input type="checkbox" id="sanford" name="sanford"/>
</fieldset>
</form>
</body>
</html>
IEまたはFirefoxで表示してみると、すべてが完璧に見えます。 ChromeまたはSafariで表示してみましょう。 「sanford」チェックボックスはの下にと表示されます。良くない。チェックボックスは明らかにラベルの右に表示されるはずです。さらに複雑なことは、チェックボックスを他の入力（テキスト、ラジオなど）で置き換えると、すべてがすべてのブラウザに正しく表示されるということです。この問題はチェックボックスに限られているようです。
私はここで起こっていることを頭で包み込むことはできません。 'Sanford'のラベルが左に浮かんでいるので、おそらくチェックボックスはそのラベルのすぐ右に流れるはずです。実際Firefox/IEではこれが起こります...なぜChrome/Safariにはないのですか？
ご協力いただければ幸いです。
EDIT：要求されたように私はフィドルサイトにコードを投稿：http://jsfiddle.net/ChadDecker/FyNZw/
このコードの[フィドル]（http://jsfiddle.net）を作成し、それは – Ibu
より多くの意味を行います[OK]を私はフィドルのアカウントを作成して：私はあなたがボックスと呼ばれる表示するには、単純なクラスを作りましたここにコードを掲載しました。 IE/Firefoxで正しく表示されるが、Chrome/Safariで正しく表示されない場合は、チェックボックスが表示されます... http://jsfiddle.net/ChadDecker/FyNZw/ –