Home > スポンサー広告 > pre要素のスタイルを追加

スポンサーサイト

スポンサー広告

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

Comments:-

Comment Form

Trackback+Pingback:-

TrackBack URL for this entry
http://karafuto50.blog117.fc2.com/tb.php/37-5e9b21c4
Listed below are links to weblogs that reference
スポンサーサイト from Karafuto Blog

Home > スポンサー広告 > pre要素のスタイルを追加

Home > blog > pre要素のスタイルを追加

pre要素のスタイルを追加

blog

FC2ブログ公式テンプレートのwhiteにはpre要素のスタイルが指定していない。そのためpre要素のテキストがはみ出すから、スタイルを追加した。

<pre>要素を伸縮自在にする | Diaspar Journalを参考にしました。

div.body pre {
  margin: 1.5em auto;
  padding: 1em;
  border: 1px solid #ccc;
  width: 90%;
  overflow: auto;
  color: #333;
  background-color: #f7f7f7;
  overflow-y: hidden;
  *padding-bottom: 25px; 
}

IEでは邪魔な垂直スクロールバーが表示されるので、pre要素のスタイルに「overflow-y: hidden」を指定して消している。

IEだと水平スクロールバーがテキストの上にかぶさるから、pre要素タグのスタイルに「*padding-bottom: 25px」を指定している。プロパティの頭にアスタリスクを付加するCSSハックで、IEにだけ適用する。

Comments:0

Comment Form

Trackback+Pingback:0

TrackBack URL for this entry
http://karafuto50.blog117.fc2.com/tb.php/37-5e9b21c4
Listed below are links to weblogs that reference
pre要素のスタイルを追加 from Karafuto Blog

Home > blog > pre要素のスタイルを追加

おまかせリンク(R)
全記事表示リンク
Search
Meta
Feeds

Page Top

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