CSSテクニックコミュの[重要]　クロスブラウザの掟

こんにちは。
みんな必死こいてｃｓｓを勉強してますよね。
僕もそのうちの一人です。
まだはじめたばっかですが。。

そんなみなさん。
問題がおきては調べて、そして書いて、また問題起きて、調べて、の繰り返しだと思います。

そこで！！
ジャー最初っからやったらアカンとことがわかってたらええんちゃうの？
と、ゆーことで、クロスブラウザの掟と題しまして立ち上げさしていただきました。

自分の経験だけなので待ち\がってたらごめんなさい。
早速掟開始！！

一、formはblockをはじく。（自信ない）

一、floatするとblockになる。（ほんま？）

一、list img はvertical-aling:btm;にするとくっつく。

一、IEでの少しのずれはhtmlの空白スペースtabキーかも。

一、Tableのtdにblockをかけると大変なことになる。

一、padding margin と　width height をおんなじところにかかない。

　　　　　階層1<width:500px;>
　　　　　　階層２<width:100%;>
　　　　　　　階層３<padding:5px;>
　　　　　　ってなかんじ。

ほかにも掟あったらバシバシ書いてみてください。

何度もいいますが間違えてたらごめんなさい。

コメント(30)

最初
全て
最新の40件

[3] mixiユーザー 06月27日 20:40

[重要]とか強めのタイトル付けるべき内容じゃないとかゴニョゴニョ思いつつも

ありがとうさんの
>一、IEが嫌いになる
は、激しく同意と表明しておきます。

[4] mixiユーザー 06月27日 20:54

IEでの少しのずれはこまりすぎる

[5] mixiユーザー 06月27日 22:12

トピ主の希望通りのレスでは無くて申し訳無いが、
＞一、IEが嫌いになる
＞一、Firefoxが好きになる
は俺も一票投じたく。

[8] mixiユーザー 06月27日 23:57

ホント、IEが嫌いになりますね。
普段からFirefox使ってるせいか、更に嫌いになりました。

[9] mixiユーザー 06月28日 00:11

つ star hack

一、マカーなヤツは更に辛い

[10] mixiユーザー 06月28日 00:34

一、マカーなIE？何それ。ってなる

個人的には IE6 よりも Opera があまり…

[11] mixiユーザー 06月28日 00:37

必要最低限でハックなどは使っていない位の知識ですが、以下は気を付けています。
1.margin padding と　height width borderは一緒に書かない
2.floatしたらdisplay:inline（or block）…左marginがおかしくなる（IE）
3.floatしたら必ずwidth（特にfloatの中のfloatに無いとIE文字消える）

かなぁ。あと趣味でやってるくらいなので、一番は「できないならそのデザインはあきらめる」かと。
無理はしない………と。

[13] mixiユーザー 06月28日 00:56

こんばんわ、マークアップエンジニアしてます。

二、嫌い嫌いが一周してIEを好きになった。

IEのお陰でクライアントからクロスブラウザ対策費がもらえ、クロスブラウザのコーディングができると部署内でちやほやされ、ご飯のおかずが一品増えた！

仕事ではやはり皆の苦手なところが儲かるんですね。

あと実用的なものかいときます。

一、floatしたらwidth指定（指定しないとブラウザによってバグります）
一、MacIE5.xはboxで囲ってclearできないのでdisplay:inline-table;にするとなぜかクリアできる。

あ、おみやげおいときます。

/* どんなブラウザでもクリアできる呪文 */

box:after{/* for modern brouser */
content: " "; clear: both; height: 0; display: block; visibility: hidden;}

* html box{/* for IE */
/*\*/height:1%;/* for WinIE*/
display:inline-table;/* for MacIE*/
}
/* 呪文ここまで */

[15] mixiユーザー 06月28日 10:03

kennsuさんすげーー！！

本気で呪文ですねそれ、。ありがとうございます！

飴☄さん>
一、誤字には気を付ける

承知いたしました。。もうしわけ。。

僕もなんか見つけたらバシバシ書いていきますので！

[17] mixiユーザー 06月28日 11:50

kennsu さんご紹介の方法だと
Win IE にも inline-table が当たってしまいませんか？

大丈夫なのかなぁ・・・。

海外の方が考案した方法だと inline-table の後に
Mac IE 以外に block 指定したりしますが、必要ないのかな？

以下、海外の方の方法。

selector:after {
content:".";
display:block;
height:0;
visibility:hidden;
clear:both;
}

selector {
display:inline-table;
}

/* hides from mac IE \*/
* html selector {
height:1%;
}
selector {
display:block;
}
/**/

[18] mixiユーザー 06月28日 15:46

レイアウト配置用クリア IE6配置ずれバグ対策ほか
http://blog.y-iweb.com/archives/000255.html

構造のマークアップなしでフロートをクリアする方法
http://www.kuroduction.com/doc/translation/position_is_everything/easyclearing.html

inline-tableだったりinline-blockだったりいくつか方法がありますネェ。

[19] mixiユーザー 06月28日 16:21

どうも、意外と反響があったようで何よりです。
今日ぼくはSNSの開発の仕事があるんですがお腹が痛すぎてトイレから出たくないためトイレにノートもちこみでガリガリソース書いてます。はかどります。
皆さんもこれくらいの心意気で頑張って下さい

補足ですが、
inline-tableの件ですがIEのみですんでそのままで問題ありません、

ブロック直した方がよいには違いありませんが
ただ、コーダーの心情としてソースはわずかでも見やすく仕上げたかったので省略してます。

あと、誤字に気をつけるの件ですが、
よく見たらブラウザのスペルが間違ってました、はずかしや。

[21] mixiユーザー 06月30日 14:28

一、IEのtrにはbackgroundを指定できない。
　　できるけどtdが複数のときは大変なことになる。
　　（基本？）

[22] mixiユーザー 06月30日 14:55

Firefoxが好きになる
すごいわかりますｗｗ

[23] mixiユーザー 06月30日 15:24

kennsuさんの意気込みに１票！！！

[24] mixiユーザー 07月02日 02:52

firefoxが好きになるに同意。
ですが、現実問題、IEに対応しなきゃ話にならない。
悲しき現実ＴＴ

[25] mixiユーザー 07月05日 02:20

・floatとwidthはつけないといけなくて、
http://www.swlab.it.okayama-u.ac.jp/man/rec-css2/visuren.html#floats

・widthはブロック要素・置換要素にしか使えないプロパティだったりする。
http://www.swlab.it.okayama-u.ac.jp/man/rec-css1/rec-css1.html#width

・うっかりインラインにwidthつけると、文法エラーで
音声ブラウザで読み上げられないらしい。
（インラインに変換したもののなかにブロックもだめ）
これはweb雑誌で見ただけ。

・floatのバグは置換要素には無く、ブロック要素にはある。

・positionはネスケで問題あり。
IEも色々とやってくれる。

・clearかけてる枠の中ではfloat効かない(macIEのみ)

・IEで背景が表示されないバグ。
文字が変なところに出るバグ。
高さが膨らむバグは、
/*\*/*html{height:1%}/**/で回避される。
（されないときは大体floatのclear場所が原因。IEだけ）

・IEとかじゃなければ、ブロック要素をまとめるためのタグdivに対してマークアップ用のタグはmarginをとらない気がする。

・paddingは自分の内側にかけ（対象自分）、marginは相手を選ぶ。

・listにfloatをかけるとき、aがついて来なかったりするから、divで囲う。

・safariはbackground-repeatをとってるとこにbackgound-positionを効かせてくれなかった。（恨み・・）

・divを入れ子にしてるとき、2つのdivの内側のタグが、divに対してmarginをとると、一番外側のdivにmarginとって内側のdivがぺったりくっ付き、むき～！ってなる。

・macIEには色々と恨みがある。

[26] mixiユーザー 07月05日 02:38

まだあった。
・winIE7はhackで不祥事を起こす
(IEの開発グループによる呼びかけで、
IE独自のタグにifのように分岐させるタグがあるから
それを使うようにってことらしいです。xhtml strict)

htmlのときはどうなるんだろう。
気になる。winIE7..

ちなみにafterはよく使いますよ。
ある本のパクリから応用してます。

セレクタ:after{
content:".";
display:block;
height:0;
clear:both;
visibility:hidden;
}

/*only winIE\*/ *html セレクタ{height:100%} /**/
/*only macIE\*//*/ セレクタ{display:inline-block} /**/

※height:100%はwinIEで背景を綺麗に表示させたいときに使う。
普段は省略。

・あと、floatでfloatをクリアできる。(macIE以外)

結構使うから。。
気になりますね。winIE7..

[27] mixiユーザー 07月05日 02:46

＞あおい→↓↘ さん！
ありがとうございます。
↓この邦訳知らなかった。。
http://www.kuroduction.com/doc/translation/position_is_everything/easyclearing.html

せっせと辞書と睨めっこしてました。

[28] mixiユーザー 07月05日 05:35

IE7絡みで*(ユニバーサルセレクタ)関連のハックが不具合を起こす可能性があるとかで一時期はやったんですが、

条件分岐ハック(Conditional hack)みなさんご存知ですか？
私は使い勝手が悪いのであまり使いません。
これは掟レベルかどうかよかったらご意見下さい。

あと実用的な小技、定石かもしれませんが提供します。

一、bodyにはid、classを設定すると便利
（idはCSS Signature用にclassは自由に使う！）

一、<p><a>～～～</a></p>とかの場合pを相対配置、そしてaのdisplayをblockにして絶対配置すると文法を守りながら位置が自由自在

あとは、心得として
一、W3Cの仕様書の和訳読んでAnother Lintも常に通しましょう

あと宣伝ですが最近はてなダイアリーはじめました、皆さんのお役にたてるようにコピペシリーズ公開していきますんでよろしくお願いします。
http://d.hatena.ne.jp/kennsu/

[29] mixiユーザー 07月18日 10:42

おひさしブリです。

一、display="block"で指定した箱にverticalalign="center"はキカナイ。marginかpaddingで調節しよう。

つづけていくぜい！必死のパッチ！

[30] mixiユーザー 07月18日 16:57

ハックをやってていつも思うけど、ワープロソフト感覚でサイトを作ってた時代が懐かしいｗ

今ではサイトを作るのがプログラミング並になってますよね…。

ログインすると、残り8件のコメントが見れるよ