ホームページ制作、千太の絵空事

時に勝つ!投稿できることに感謝しています。(千太) SINCE 2005

全体表示

[ リスト ]

そのWiki文法「引用2」の行間は,なぜ新しいブラウザで「すごく広く」見えるのか?

強制改行のタグと[改行コード]を改行となるように表示しているからです。

Wiki文法にチェク投稿した場合
その投稿したテキストに[改行コード]が含まれていると、
XHTMLの<br />を付加して出力します。

HTML文書の一般的な領域では、
<br />を解釈し、[改行コード]は無視します。(無視していいことになっている)

ブログ記事のテキストが改行されて見えているのは、
改行コードを解釈しているのではなく、この<br />を解釈しているからです。

ですが、引用2により内包される領域では、
pre要素と同じように、そのまま表示するような設定(p3 1.7)になっているのです。

(p3 1.7)
#mainContentsArea div.wiki div.quote {
padding:8px;
font-size:1em;
line-height:1.6em;
color:#4B4B4B;
background-color:#eee;
border:1px solid #ccc;
word-break:break-all;
white-space: -moz-pre-wrap;
white-space: -pre-wrap;
white-space: -o-pre-wrap;
white-space: pre-wrap;
word-wrap: break-word;
}
これは、firefoxやoperaなど,新しいブラウザに有効です。

white-space: -moz-pre-wrap;……geko系用(firefoxなど)
white-space: -pre-wrap;  ……opera用
white-space: -o-pre-wrap; ……opera用
white-space: pre-wrap;   ……新しいブラウザ(operaなど)


つまり、[改行コード]を改行として表示します。
また、タグの<br />も改行として表示します。

つまり,1つの改行コードで,改行を2つしているように表示します。

これが、行間がすごく広く見える理由だと考えられます。

以前の設定(p2)でも、
(p2)
div.quote {
padding: 8px 8px 8px 8px;
white-space:pre-wrap;
white-space: -moz-pre-wrap;
font-size:12px;
line-height:18px;
color:#4B4B4B;
background-color: #eee;
border: 1px solid #ccc;
word-break:break-all;
}



※「引用3」では、元々pre要素ですが、この部分に<br />を出力していません。



そのWiki文法「引用2」の行間は,なぜ新しいブラウザで「すごく広く」見えるのか?

閉じる コメント(1)

Yahoo!アバター

初めまして、トラックバックさせていただきました。「引用2」の行間はずっとこのままなのでしょうかねぇ。

2010/2/19(金) 午後 0:13 芋餡

コメント投稿
名前パスワードブログ
投稿

閉じる トラックバック(1)

トラックバックされた記事

Wiki文法「引用2」枠の見え方

日頃、私はYahoo!ブログではIEを使用しているため、今ごろになって初めてFirefoxで自分のブログを見たのですが、私のブログでよく使うWiki文法「'''引用2 薄灰色の背景と灰色の枠'''」の見え方が違うことに気がつきました。 例えば、Wiki文法で [[img(http://img2.blogs.yahoo.co.jp/ybi/1/c4/7d/ytxkb843/folder/547773/img_547773_90...

2010/2/19(金) 午後 0:07 [ たまに、写真と音楽と買物。 ]

トラックバック先の記事

  • トラックバック先の記事がありません。

芸能人・有名人の新着記事

Yahoo Image
飯塚雅弓
Yahoo!ブログ
05月26日 17:45

.

*************
人気度

ヘルプ

Yahoo Image

検索 検索
  今日 全体
訪問者 36 162744
ブログリンク 0 400
コメント 0 3751
トラックバック 0 228

ブログバナー

開設日: 2005/2/4(金)


プライバシーポリシー -  利用規約 -  ガイドライン -  順守事項 -  ヘルプ・お問い合わせ

Copyright (C) 2012 Yahoo Japan Corporation. All Rights Reserved.