0

Webページのフッターにテーブルを使用しています。私はいつもCSSを使っているので、テーブルについてはあまりよく知りません。以下は私が今までに作った唯一のテーブルです。Opera、Chrome、Firefoxで動作するようですが、IEではすべてが左側にあります。テーブルについてよく知らないので、テーブルで何が間違っているのかわかりません。HTMLは次のとおりです。

<div id="framecontentBottom">
<div id="container">
        <div id="row">
<div id="left">

<!-- Counter Code START --><a href="http://www.e-zeeinternet.com/" target="_blank"><img src="http://www.e-zeeinternet.com/count.php?page=760915&style=LED_g&nbdigits=4&reloads=1" alt="Web Counter" border="0" ></a><br><a href="http://www.e-zeeinternet.com/" title="Web Counter" target="_blank" style="font-family: Geneva, Arial, Helvetica, sans-serif; font-size: 10px; color: #000000; text-decoration: none;">Page Views</a><!-- Counter Code END -->

</div>


    <div id="middle">

Contact me at jacksterdavis<img src="images/@white.png">gmail.com

        </div>
            <div id="right">

            <!-- AddThis Button BEGIN -->
            <div class="addthis_toolbox addthis_default_style ">
            <a class="addthis_button_preferred_1"></a>
            <a class="addthis_button_preferred_2"></a>
            <a class="addthis_button_preferred_3"></a>
            <a class="addthis_button_preferred_4"></a>
            <a class="addthis_button_compact"></a>
            <a class="addthis_counter addthis_bubble_style"></a>
            </div>
            <script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#pubid=ra-4f302421558e3fc2"></script>
            <!-- AddThis Button END -->

            </div>
        </div>
<div id="row">
<div id="left">
</div>
    <div id="middle">
    <p>The internet is the printing press of the 21'st century.</p>
    </div>
<div id="right">
</div>
</div>

そしてここにCSSがあります：

#container {
    display: table;
    width: 100%;
    }

  #row  {
    display: table-row;   
    }

#middle {
    width:50%;
    text-align:center;
    display: table-cell;
    }

}
#left
{
   width:25%;
   text-align:left; 
   display: table-cell;
}
#right
{
   width:25%;
   text-align:right; 
   display: table-cell;
   padding: 5px;
}
#quote
{
    text-align:center;
    width:100%;
}
#logoBtm
{
    align:middle;
    text-align:center;
}
#logoBtmLeft
{
    align:left;
}
#logoBtmRight
{
    align:right;
}
#framecontentBottom{
    clear: both;
    position: relative;
    z-index: 10;
    margin-top: -3em;
    top: auto;
    bottom: 0; 
    height: 80px; /*Height of bottom frame div*/
    overflow: hidden; /*Disable scrollbars. Set to "scroll" to enable*/
    background-color: #585858;
    color: white;
    width: 100%;
}

私のテーブルのすべてが間違っていると指摘してくれたら、ありがたいです、ありがとう。CSSの修正が最適ですが、HTMLを編集する必要がある場合は問題ありません。

4

1 に答える 1

2

問題はおそらく、同じIDを持つ2つのdivがあるという事実にあります。代わりに、行にクラスを使用してください。他の人の快適さのために削除されました。この行は、手元のソリューションには役立ちません。

また、コメントを参照すると、つまり7はテーブル表示CSSをサポートしていません。

http://caniuse.com/#search=table-cell

インラインブロックまたはフロートの組み合わせを使用します。ただし、インラインブロックにはie7に関する独自の問題があるため、注意してください。

http://flipc.blogspot.com/2009/02/damn-ie7-and-inline-block.html

これは、実用的で有効な例です。

http://jsfiddle.net/mRHnW/2/

いくつかの変更点：Iveは、内部のすべてのdivのスタイルを設定.rowして、一度適用されるようにしました（修正が必要な場合は、1か所にまとめることができます。CSSでもDRYにする必要があります） 。

jsfiddleにねじ込まれていて、目に見える結果が得られたためmargin-top、セレクターからを削除しました。#frameContentBottomレイアウトにとって重要な場合は、自由に元に戻してください。

パディングも含まれているため、「列」の幅を100％よりわずかに小さく調整しました。W3Cで指定されているCSSボックスモデルが機能する方法は、幅の宣言にパディング、境界線、マージンが含まれていないことです。したがって、100％divを作成していて、5pxのパディングが必要な場合は、100％未満を指定して、100％の範囲内でパディングを取得する必要があります。

十分に広い画面（jsfiddleのデフォルトのペインよりも大きいもの）では、フッターは期待するものを確認する必要があります。

于 2012-05-01T03:58:30.643 に答える