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を覚えました。(ちなみに初版)
アドセンス広告メイン
関連記事
-
ライブドアブログ(livedoor Blog)で古い記事を簡単にツイッター、Facebookに通知する方法
1年以上前の記事です。内容が古い可能性があります。実はこれ、たまたま気づいたこと …
-
Facebookのプロフィールを検索エンジンにヒットさせない設定
1年以上前の記事です。内容が古い可能性があります。【 一部手順が変わっ …
-
Outlook Expressからフリガナのインポートはできない
1年以上前の記事です。内容が古い可能性があります。さて、Outlook Expr …
-
Skypeで複数アカウントを使い分ける方法
1年以上前の記事です。内容が古い可能性があります。どうも今ひとつ固定客で凝り固ま …
-
11人しかフォロワーのいないmixiページですが流入があります
1年以上前の記事です。内容が古い可能性があります。以前、「mixiページにアクセ …
-
ブラウザで「Mac OS 7」、「Hyper Card」や「Kid Pix」も
1年以上前の記事です。内容が古い可能性があります。自分が一番最初に触れ合ったパソ …
-
USTREAMのiPhoneアプリでアカウントを切り替える方法
1年以上前の記事です。内容が古い可能性があります。今年の「うちわ祭」USTREA …
-
貴方のWebデザイナー適性度をオンラインで確認してみよう
1年以上前の記事です。内容が古い可能性があります。日々、パソコンの画面とにらめっ …
-
さくらインターネットでEC-CUBE
1年以上前の記事です。内容が古い可能性があります。ステップサーバーではMySQL …
-
「Internet Explorer 6」対策をしてみた
1年以上前の記事です。内容が古い可能性があります。ブログデザインリニューアルに伴 …
- PREV
- ソフトバンクも新機種
- NEXT
- 2in1サービスを拡充(ドコモ携帯電話)