0

在 IE 的某些分辨率中，我的页脚溢出到新行。我认为这是一个填充问题，它只是将内容推得比容器更宽。它似乎只是在某些分辨率上包装，这对我来说没有意义，因为容器的宽度远小于屏幕的分辨率。似乎找不到解决办法。

CSS：

#footer
{
    width: 100%;
    background-color: #4e4e4e;
    padding: 0 0 0;
    margin: 0;
    clear: both;
}
#sitemap
{
    width: 300px;
    padding: 20px 0;
    margin: 0 auto;
    clear: both;
}

#left_map
{
    float: left;
    border-right: 1px dotted #ffffff;
}
#right_map
{
    float: right;
    padding: 30px 0;
}
#copyright
{
    font-size: 10px;
    font-family: inherit;
    color: #ffffff;
    text-align: center;
    padding: 20px 0 0;
    clear: both;
}

HTML（片段）：

<div class="clear"></div>
<div id= "footer">
    <div id="sitemap">
        <div id="left_map">
            <h4>Sitemap</h4>
            <ul>
                <li><a class="selected" href="index.html">Home</a></li>
                <li><a href="about.html">About</a></li>
                <li><a href="services.html">Services</a></li>
                <li><a href="gallery.html">Gallery</a></li>
                <li><a href="contact.html">Contact</a></li>
            </ul>
        </div>
        <div id="right_map">
            <img src="images/footer_logo.png">
        </div>
    </div>
    <div id= "copyright">
        <p>Copyright © 2012 Cornerstone Masons</p>

    </div>
</div>
</body>
</html>
4

1 回答 1

0

需要考虑的一些想法：

  • IE 使用自己的盒子模型。关于在 Quirks 模式下添加或忽略容器宽度和边框宽度，IE 上的填充计算方式与 Moz 和 Webkit 不同，因此请确保您有一个 doctype 强制 IE 使用标准兼容模式以避免这种打嗝。
  • 确保溢出的屏幕不会在浏览器级别无意中放大。在 Windows 上按 CTRL+0 或在 Mac 上按 command+0 以设置默认缩放。
  • 您的填充padding: 0 0 0;意味着左侧填充可能会恢复为默认值。我这么说是因为 IE 是迟钝的，我不会因为在特定版本上误读它而把它放在一边。
于 2012-09-19T21:58:26.190 回答