Question

我使用表格作为我网页的页脚。我真的不太了解桌子，因为我总是使用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，那很好。

Answer 1

~~问题最可能在于你有两个具有相同id的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设置了.row内的每个div，以便它被应用一次（如果它需要修复，它可以在一个地方。即使在CSS中，它也需要{ {3}}。

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

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

在足够宽的屏幕上（大于jsfiddle默认窗格的内容），您的页脚应该看看您的期望。

IE中的CSS样式表

1 个答案: