IE 中的 CSS 样式表

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">



        </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。 使用 row 的类来代替。为了其他人的舒适而删除。 这条线对解决当前的问题没有帮助。

另外，参考你的评论，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/

有几个更改：我对

.row

内的每个 div 进行了样式设置，以便应用一次（如果需要修复，可以在一个地方修复。即使在 CSS 中，也需要是 DRY。

我从

margin-top

选择器中删除了

#frameContentBottom

，因为它与 jsfiddle 拧在一起，给了我可见的结果。 如果它对您的布局很重要，请随时重新设置它。

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

在足够宽的屏幕上（比 jsfiddle 默认窗格更大的屏幕），您的页脚应该看起来像您所期望的那样。