html - IE 中的 CSS 样式表

Question

我正在为网页的页脚使用表格。我真的不太了解表格，因为我一直使用 CSS。以下是我做过的唯一一张 table 。它似乎适用于 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

使用内联 block 或 float 的组合。但要小心，因为内联 block 在 ie7 中有其自身的问题

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

这是一个有效的示例。

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

几个变化:我为 .row 中的每个 div 设置了样式，以便它只应用一次(如果需要修复，它可以在一个地方。即使在 CSS 中，它需要是 DRY 。

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

我将您的“列”宽度调整为略小于 100%，因为您还包括了填充。 CSS的方式Box Model as specified by W3C有效的是宽度声明不包括填充、边框和边距。因此，如果您要创建一个 100% 的 div，并且想要 5px 的填充，那么您需要指定小于 100% 的值，以使填充在 100% 的范围内。

在足够宽的屏幕上(比 jsfiddle 默认面板大的东西)，你的页脚应该看起来像你期望的那样。