CSSは行送り(vertical-align)に注意!!
1年以上前の記事です。内容が古い可能性があります。
久しぶりにCSSコーディングなんかをやっているといろいろなことに気付く。
今回はCSSに関してのワンポイントアドバイス。
以前も、SafariでCSSを使った角丸罫囲みに隙間が空いてしまうことがあったのですが、
それと似たようなことが今度はIE6で起きました。
何故だか理由はわからないのですが<p>タグで囲まれたテキストに対しての「margin-top」にマイナスの値を入力すると、どこからか罫線が現れてくるという現象です。
<div>タグが入れ子になっているためにどこからか背景が現れているような気はするのですが、
いくら「margin」の指定を変えても消えない。マイナスにしないと大丈夫。
しかも、IE7では問題ないのでIE6特有のバグでしょう。
そういえば以前、リスト<li>タグに関するバグではまったこともあったけど、
あれもIE6だったはず。
で、いろいろやってみてふと、上記のSafariの記事のことを思い出し、
行送り(vertical-align)をいじってみると。。
直った。
今回は大き目の数値を入れたら直りました。
■教訓
CSSでデザインをする際、微妙に隙間が空いたり、なぜだか罫線が入ってしまったりしたときは「行送り(vertical-align)」を怪しんでみましょう。
□おススメ本
詳解HTML&XHTML&CSS辞典 第3版
僕はこれでCSSを覚えました。(ちなみに初版)
アドセンス広告メイン
関連記事
-
Tumblr(タンブラー)を自分の言葉でつぶやこう(ツイッター連携時に自由にツイートする方法)
1年以上前の記事です。内容が古い可能性があります。Tumblr(タンブラー)とツ …
-
「paper.li」のブロックはニュースソース単位でやるのがいい
1年以上前の記事です。内容が古い可能性があります。「paper.li」というサー …
-
急須の口についた「ビニールキャップ」は運搬時の保護のため、外して使うのが正しい使い方
1年以上前の記事です。内容が古い可能性があります。そういえば、うちもかなり以前、 …
-
携帯サイト(ケータイサイト)の作り方Part2
1年以上前の記事です。内容が古い可能性があります。携帯サイト作成に関するすばらし …
-
さくらでEC-CUBEバグ取りメモ
1年以上前の記事です。内容が古い可能性があります。前回、商品検索のバグを取った後 …
-
ツイッター(twitter)とFacebook(フェイスブック)を連携させる方法
1年以上前の記事です。内容が古い可能性があります。以前、「twitter(ツイッ …
-
料金差がある場合の割り勘(ワリカン)方法
1年以上前の記事です。内容が古い可能性があります。料金に差がある場合に比較的簡単 …
-
2011年「初日の出」画像まとめ
1年以上前の記事です。内容が古い可能性があります。ツイッター(Twitter)で …
-
リンクポピュラリティとアンカーコンテキストマッチ
1年以上前の記事です。内容が古い可能性があります。SEOでよく、リンクポピュラリ …
-
ビジネス(会社内)では「了解しました」はNG。「承知しました」が正しい【ビジネス用語】
1年以上前の記事です。内容が古い可能性があります。もう、半年になるんですかね。い …
- PREV
- ソフトバンクも新機種
- NEXT
- 2in1サービスを拡充(ドコモ携帯電話)