0

我的网页中有一个页脚，里面有一些文字。当我尝试向其添加padding-left属性时，页脚的宽度会在封闭的父元素上扩展，div并且此问题仅发生在 Opera 上，而不发生在 Chrome、Firefox 或 IE 上。应该怎么做才能纠正它？

页脚的 CSS：

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

3 回答 3

2

与其在页脚中添加额外的块级元素，不如尝试将值设置为边框框的 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

于 2013-09-12T15:54:06.553 回答
0

这是常识。如果您添加“填充”和“100% 的宽度”，您将得到该结果。去掉“padding”或者“width of 100%”你会发现问题不复存在了。

在 parent-of-footer 和 footer 之间添加div标签，并将 padding-left 添加到 new 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>
于 2013-09-08T07:09:38.083 回答
0

您可以通过在页脚标签中使用 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>
于 2013-09-08T06:44:34.667 回答