0

我正在使用一个表格作为我网页的页脚。我真的不太了解表格，因为我一直使用 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 的 div。改为使用类作为行。为了他人的舒适而删除。这条线对手头的解决方案没有帮助。

另外，在参考您的评论时，ie 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/

一些变化：我已经对其中的每个 div 进行了样式设置，.row以便它被应用一次（如果需要修复它，它可以在一个地方。即使在 CSS 中，它也需要是DRY。

我margin-top从#frameContentBottom选择器中删除了 ，因为它与 jsfiddle 搞砸了，给了我可见的结果。如果它对您的布局很重要，请随时重新设置它。

我将“列”的宽度调整为略小于 100%，因为您还包括了填充。W3C 指定的 CSS盒模型的工作方式是宽度声明不包括填充、边框和边距。因此，如果您正在创建一个 100% 的 div，并且想要 5 像素的填充，那么您需要指定小于 100% 以使填充在 100% 范围内。

在足够宽的屏幕上（比 jsfiddle 默认窗格大），您的页脚应该符合您的预期。

于 2012-05-01T03:58:30.643 回答