ちょっと役立つCSS2
DATE:05-11-24 Category:Web
前回書いたちょっと役立つCSSの第二弾です。
今回は、困った時系で。
は?画像の間に隙間できるんだけど、ネスケ
これは仕様です。どうやら、画像はインライン要素なんでベースラインに揃えて表示しちゃうみたいです。ネスケは。
こんな時は、img要素にdisplay:block;を指定してやれば問題ありません。
img {
border: none;
}
img.b{
display:block;
} こんな記述をはじめから入れといてます。マージンを取られて困るような画像には、class="b"を指定します。
Win IEってフロートさせた時のマージン変じゃない??
これは、たぶんバグ。WinIEを使ってる人はFirefoxとかが変なんじゃないかと思ってるかもしれません。
このせいで、左右に分けた領域がWinIEだけ、下に落ちちゃうって現象が出たりします。どうやらフロートさせるとマージンが指定より多めに取られちゃうみたいです。前までめちゃくちゃ悩みましたが、速攻で解決できました。
box{ float:left;
display:inline;
margin:0 20px;
}
box2{
float:right;
display:inline;
margin:0 10px;
} こんな感じで、display:inline;を入れるだけで解決します。
フロートしてる要素がインラインになってもあまり意味がないので、正しいブラウザでも今後問題になる事はないと思います。
指定した記述が効いてない!
いろいろ原因はありますが、その記述より先に優先度の高い記述がある恐れがあります。
特定の記述を優先させたいときは、
margin: 0 ! important;! importantを入れると優先度が上がります。
今回はこんな感じで。。またやるかもしれません。
trackback
このブログ記事に対するトラックバックURL:
http://s-bot.net/MT/mt-tb.cgi/87

Comment 0
コメントする(アルファベットのみのコメントは投稿できません。)