0

私はテーブルを持っているウェブページを持っていて、tdの1つの中には小さいフォントを使用するスパンがあり、右端に配置するために右にフロートし、負のマージントップがあるので、tdの大きなテキストに揃えられます。

Firefox 3.0では問題なく動作しますが、Firefox 3.5にアップデートしたところ、余白がテキストを上に移動しすぎています。

別のページがあり、2つのスパンエントリがあります。2番目のページはフォントが小さく、余白が負で、同じ問題が表示されます。

3番目のページでは、h3の後にスパンが続き、フォントが小さく、余白が負であるため、Firefox3.5では正常に機能します。

今日Safariをインストールしましたが、Firefox3.5と同じように動作します。さまざまなIEバージョンを処理するための条件付きCSSがあるため、IEに問題はありません（IE 7は負のマージンを使用しますが、IE 8は小さな正のマージンを使用します）。

質問（最後に：^）：

  • Firefox 3.5のスパンと負のマージンのレンダリングの変更を知っている人はいますか？

  • ブラウザ固有のハッキングなしで同じ結果を得るには、他にどのようにHTMLまたはCSSを作成できますか？

2番目のケースでは、3番目のケースと同様に、2つのスパンからh3とスパンに変更しました。最初のケースは実際には表形式のデータなので、テーブルを使用しています。問題の一部を次に示します。

<div id="content">
<table id="events2" cellspacing="0">
<tr class="month">
<td>August 2009<span class="gotop">(go to top)</span>
</td></tr>
<tr>
<td>
A table row</td>
</tr>
</table>

関連する（私が望む）CSSは次のとおりです。

div#content {
    margin: 0;
    padding: 0
    width:100%;
    background: white;
    color: black;
    font-size: 80%;
}
#events2 td {
    padding: 4px;
    border-bottom: 2px solid #BBB;
}
#events2 tr.month td {
    padding: 0.125em 0;
    font-size: 1.2em;
    text-align: center;
    border-top: 3px solid black;
    border-bottom: 2px solid #BBB;
}
#events2 tr.month td .gotop {
    float: right;
    font-size: 0.6em;
    margin-top: -1.4em;
    padding-bottom: 0.3em;
}

前もって感謝します！PCM

4

3 に答える 3

2

私の経験では、Firefox 3.0 と 3.5 の間のレンダリングは非常に一貫しています。ここでの問題は、マークアップ内のフローティング SPAN の場所だと思います。あなたが達成しようとしていることを正しく理解していると仮定すると、通常のドキュメント フローでレンダリングされる TD のコンテンツの前にフローティング SPAN を配置します。

簡単なテスト ページを (XHTML Transitional doctype を使用して) 作成し、コードに次の変更を実装しました。Firefox 3.0、Firefox 3.5、および Safari 4.0 (すべて Windows) で一貫したレンダリングが見られます。

HTML:

<div id="content">
    <table id="events2" cellspacing="0">
        <tr class="month">
            <td><span class="gotop">(go to top)</span>August 2009</td>
        </tr>
        <tr>
            <td>A table row</td>
        </tr>
    </table>
</div>

CSS:

#events2 tr.month td .gotop {
    float: right;
    font-size: 0.6em;
    /*margin-top: -1.4em;*/ /* REMOVED */
    /*padding-bottom: 0.3em;*/ /* REMOVED */
    margin-left: 5px; /* ADD */
}
于 2009-08-15T14:52:51.603 に答える
0

Firefox 3.5.2は、ベータ版の単なる改良版です。これがFirefoxの問題である可能性があることは間違いありませんが、Safariでも問題が発生する場合は、コードである可能性があります。

ウェブサイトをデザインするための「より良い」方法であるcsszengarden.comをチェックしてください。

また、テーブルのレイアウトに精通している必要があります。私は誰かがtd、あるいはフロートに負のマージンを置くことを聞いたことがありません。テーブルは厳密に配置されているため、1つのtdを200pxの幅にすると、他のすべてのテーブルの数になります（テーブルを互いにネストしない限り）。

本当に必要な場合を除いて、テーブルを削除するだけです。

また、ページへのリンクを送信して、正確に何が間違っているかを確認できますか（OSXでSafari4.x開発者を使用しています）。

于 2009-08-15T14:06:17.880 に答える
0

td の中央に配置されたテキストとスパンの右側のフロートと負のマージンの組み合わせは、ブラウザーで異なる方法でレンダリングされています。

何かを右にフローティングするとは、それを右に移動し、その後のコンテンツを左に表示することを意味します。テキストを右に浮かせてから、負のマージンを使用して、その前のテキストのベースラインに移動しています。

テキストの前のスパンを左に移動すると、負のマージンなしで正しく整列します。

<td><span class="gotop">(go to top)</span>August 2009</td>

#events2 tr.month td .gotop {
    float: right;
    font-size: 0.6em;
    padding-bottom: 0.3em;
}
于 2009-08-15T15:29:15.647 に答える