プロフィール

kosaki

Author:kosaki
連絡先はコチラ

ブログ検索
最近の記事
最近のコメント
最近のトラックバック
リンク
カテゴリー
月別アーカイブ
RSSフィード
FC2ブログランキング

スポンサーサイト このエントリーをはてなブックマークに追加

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。


スポンサー広告 | 【--------(--) --:--:--】 | Trackback(-) | Comments(-)

IEはborderとpaddingを同時に使ってはダメ このエントリーをはてなブックマークに追加

このサイトの管理人はデザインとか絵心とかいうものはまったくダメダメである。
そういうわけで、このblogのデザインはぜんぜん自分で考えたものではなくて* cuteblog *さんのところで公開されている共有テンプレートを使わさせていただいている。

使用感はかなりグッドで人にもオススメしていたのだが、ひとつだけ困った不具合があった。
等サイトで多用する<blockquote>をつかうと後続の文字がどんどん左にずれていってしまうのである。


blockquoteすると・・・




Firefoxではそのような現象は観測されず、IEだけで問題がでるため、IEの不具合関連を中心に調査したところ以下のことが分かった

IEは左右ボーダーとパディングを同時に使ってはいけないらしい

そうと分かれば話は早い、CSSを以下のように修正した


変更前:
/* -- ▼引用▼ -- */
blockquote {
font-size: 12px;
padding: 5px;
margin: 5px;
background-color:#f0f0f0;
border-left: 3px solid #cdcdcd;
}


変更後:
/* -- ▼引用▼ -- */
blockquote {
font-size: 12px;
margin: 5px;
background-color:#f0f0f0;
border-left: 3px solid #cdcdcd;
}
blockquote p{
padding: 5px;
}
blockquote pre{
padding: 5px;
}


僕が<blockquote>の中に、たいてい<p>か<pre>のどちらかを置くクセを利用したハックである。

いまのところ、これでうまく行っている。

追記: cuteblog様がもっといい解決策を見つけてくださった模様。 すばらしい!



2006012704.jpg
ダメ! 絶対! ランキング!




関連記事


blog | 【2006-02-11(Sat) 16:45:31】 | Trackback:(0) | Comments:(5)
コメント
はじめまして、こんにちわぁ。
テンプレート使っていただいてありがとうございます。
ぉぉ、そんな現象があるのですね。
修正していただいてありがとございます。
修正方法をうちの記事内にリンクさせてもらってもいいですかぁ?
よろしくお願いいたします。
2006-02-12 日 00:07:45 | URL | みる #4uAjNfEA [ 編集]

コメントありがとうございます。
こちらこそ、テンプレートでお世話になりっぱなしですm(_ _)m
リンクの件、もちろんOKです。
これからもよろしくお願いいたします。
2006-02-12 日 00:16:48 | URL | 管理人 #- [ 編集]

ありがとうございます!
これからもよろしくお願いしますね!
2006-02-12 日 00:34:24 | URL | みる #4uAjNfEA [ 編集]
このコメントは管理人のみ閲覧できます
2007-09-01 土 20:57:53 | | # [ 編集]
このコメントは管理人のみ閲覧できます
2007-10-11 木 20:20:50 | | # [ 編集]
  1. 無料アクセス解析
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。