「はてなダイアリー」について RSSフィード
 

2011年7月15日をもちまして、はてなサポート掲示板は新規投稿の受付を停止致しました。
今後は、人力検索はてなの「はてなの使い方」カテゴリーをご利用ください。
※ご要望や不具合のご報告ははてなアイデア、はてなからのご返信が必要な質問はお問い合わせページをご利用ください。

683YuichirouYuichirou   678  Re:ブログツール「NHK時計」が欠けてしまう

id:motomokeさん

NHK時計のスクリプトは、時計を表示するためにiframeを作成するのですが、そのiframeに関する以下のスタイルシート設定に問題があります。

iframe{
  margin: 0;
  padding: 10px;
  background-color: #ffffff;
}

Internet Explorerの有名な仕様に、要素の幅(width)や高さ(height)と言った場合、本来ボーダー(border、枠線)やパディング(padding、ボーダーの内側の余白)の幅を含めないことになっているのに、IEでは含めてしまうというものがあります。

NHK時計のスクリプトが生成するiframeは、実は要素の幅が150pxと指定されています。そしてiframeに関するスタイルシートでは「padding: 10px;」が設定されている。つまり、IEはこれらのことから、本来150px分あるべき時計表示を、左右のパディングで130px分にしてしまうのです。

解決策としては、パディングの代わりにマージンを使って、

iframe{
  margin: 10px;
  padding: 0;
  background-color: #ffffff;
}

とするのが良いでしょう。

返信2008/05/03 22:25:33