Question

我的网页中有一个页脚，里面有一些文字。当我尝试向其添加padding-left属性时，页脚的宽度会扩展到封闭的父div元素上，这个问题只发生在Opera而不是Chrome或Firefox或IE中。应该是什么做了纠正吗？

页脚CSS：

footer {
color: #FFFFFF;
background-color: #3399CC;
padding-top: 12px;
padding-bottom: 12px;
width: 100%;
float: left;
}

Answer 1

您应该尝试将值设置为border-box的CSS3 box-sizing属性，而不是在页脚内添加额外的块级元素。以下页脚定义应该可以为您解决问题：

footer 
{
   color: #FFFFFF;
   background-color: #3399CC;
   padding-top: 12px;
   padding-bottom: 12px;
   width: 100%;
   float: left;
   box-sizing: border-box; /* prefix accordingly */
}

要阅读简短的介绍，请访问以下链接：http://www.w3schools.com/cssref/css3_pr_box-sizing.asp

Answer 2

您可以通过在页脚标记内部使用div并将填充应用于该div来解决此问题

<style>
footer {
    color: #FFFFFF;
    background-color: #3399CC;  
    width: 100%;
    float: left;    
}
.footer {
    padding-top: 12px;
    padding-bottom: 12px;
    padding-left:10px;
}
</style>
<footer>
<div class="footer">hello this is footer</div>
</footer>

Answer 3

这是常识。如果添加“填充”和“宽度100％”，您将获得结果。删除“填充”或“宽度100％”，您会发现问题不再存在。

在父页脚和页脚之间添加div标记，并将填充左侧添加到新的div，如下所示：

<div id="parentOfFooter" style="background-color: #00ff00;">
    <div id="paddingLeftProblemSolver" style="background-color: #ff8800; padding-left:50px;">
        <div id="myfooter" style="color: #FFFFFF; background-color: #3399CC; padding-top: 12px; padding-bottom: 12px; width: 100%; float: left;">
            i'm a footer
        </div>
    </div>
</div>

页脚填充使其扩展到其父div宽度

3 个答案: