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を覚えました。(ちなみに初版)
アドセンス広告メイン
関連記事
-
-
ページランクまとめ
1年以上前の記事です。内容が古い可能性があります。過去ログみてもページランクの仕 …
-
-
2011年「初日の出」画像まとめ
1年以上前の記事です。内容が古い可能性があります。ツイッター(Twitter)で …
-
-
「HTML5」「CSS3」「ActionScript3.0」
1年以上前の記事です。内容が古い可能性があります。近頃はディレクション業にかまけ …
-
-
ドコモケータイの契約変更は「151」にダイヤル
1年以上前の記事です。内容が古い可能性があります。iモード(インターネット)で契 …
-
-
念のため放射能がどの程度飛散しているか調べられるサイト(4/21追記)
1年以上前の記事です。内容が古い可能性があります。あくまでも念のためです。僕も水 …
-
-
「RSS Graffiti」がバージョンアップし使いやすくなった【Facebook】
1年以上前の記事です。内容が古い可能性があります。いつの間にやらFacebook …
-
-
グルメ系、レビュー系の記事に集客力は殆ど無い
1年以上前の記事です。内容が古い可能性があります。ノンジャンルで記事を書き続けて …
-
-
デザイン変えてみた
1年以上前の記事です。内容が古い可能性があります。すぐまた変えるかも。 結構色々 …
-
-
iPhoneで自分の携帯番号を確認する方法
1年以上前の記事です。内容が古い可能性があります。勢いで確認するシリーズを3つま …
-
-
ワードプレス(WordPress)のアップグレードをちゃんとやってみた【さくらインターネットの場合】 #wp
1年以上前の記事です。内容が古い可能性があります。ワードプレス(Wordpres …
- PREV
- ソフトバンクも新機種
- NEXT
- 2in1サービスを拡充(ドコモ携帯電話)