MobavletypeのCSSについて質問です。

エントリー部分を1つずつ、二重線のような枠で囲みたいと思っています。
外側が太めの線で、内側を細い線をしたいのでentry部分にdivをひとつ付け足しました。

IEで確認したところ、全く問題なく表示されたのですがFFで確認すると細い線の枠が右側に突き抜けて#container-innerいっぱいに表示されてしまいます。
外側の太い線の表示は正しいままなので、線が交差している状態です。

原因は何でしょうか?
また改善方法がわかればお願いします。
ソースはコメント欄に。

回答の条件
  • 1人2回まで
  • 登録:
  • 終了:2007/02/09 15:15:03
※ 有料アンケート・ポイント付き質問機能は2023年2月28日に終了しました。

回答1件)

id:komorebi No.1

回答回数133ベストアンサー獲得回数8

ポイント70pt

飛び出してしまった部分に、padding で余白をつくっていませんか?

おそらく、ボックスモデルの解釈違いによるものだと思いますよ。

http://www.lucky-bag.com/archives/2004/10/post_3.html

http://snippet.admi.co.jp/archives/38/

モダンブラウザと、IE6以下、そしてIEだけでも、6と以下で解釈が随分違います。

id:eco_clover

ありがとうございます!

entryの幅は設定していなかったのですが、

ハックと共に設定したら無事解決いたしました。

早い解決ありがとうございました!

2007/02/09 15:13:30
  • id:eco_clover
    該当部分のCSSソース

    .entry {
    margin: 0;
    padding: 10px;
    border: solid 1px #baeadc; }

    .mint {
    margin-bottom: 15px;
    padding: 2px;
    border: solid 3px #baeadc; }


    htmlのソース
    <MTEntries>
    <$MTEntryTrackbackData$>
    <MTDateHeader><h2 class="date-header"><$MTEntryDate format="%x"$></h2></MTDateHeader>
    <div class="mint">
    <div class="entry" id="entry-<$MTEntryID$>">
    <h3 class="entry-header"><a href="<$MTEntryPermalink$>"><$MTEntryTitle$></a></h3>
    <div class="entry-content">
    <div class="entry-body">
    <$MTEntryBody$>
    <MTIfNonEmpty tag="EntryMore" convert_breaks="0">
    <p class="entry-more-link">
    <a href="<$MTEntryPermalink$>#more">続きを読む "<$MTEntryTitle$>" &raquo;</a>
    </p>
    </MTIfNonEmpty>

    <MTEntryIfTagged>
    <div class="entry-tags">
    <h4 class="entry-tags-header">タグ:</h4>
    <ul class="entry-tags-list">
    <MTEntryTags>
    <li class="entry-tag"><a href="<$MTTagSearchLink$>" rel="tag"><$MTTagName$></a></li>
    </MTEntryTags>
    </ul>
    </div>
    </MTEntryIfTagged>
    </div>
    </div>

    <p class="entry-footer">
    <span class="post-footers">
    <MTIfNonEmpty tag="EntryAuthorDisplayName">
    投稿者: <$MTEntryAuthorLink show_email="0"$> 日時: <$MTEntryDate format="%x %X"$>
    <MTElse>
    日時: <$MTEntryDate format="%x %X"$>
    </MTElse>
    </MTIfNonEmpty>
    </span>
    <span class="separator">|</span> <a class="permalink" href="<$MTEntryPermalink$>">パーマリンク</a>
    <MTIfCommentsActive>| <a href="<$MTEntryPermalink$>#comments">コメント (<$MTEntryCommentCount$>)</a></MTIfCommentsActive>
    <MTIfPingsActive>| <a href="<$MTEntryPermalink$>#trackback">トラックバック (<$MTEntryTrackbackCount$>)</a></MTIfPingsActive>
    </p>
    </div>
    </div>
    </MTEntries>

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

回答リクエストを送信したユーザーはいません