Question

所以我在chrome中嵌套了div

<div id="wrapper"> 
   <div id="content">
   </div>
</div>

包装div只是一个盒子形状的边框容器。在safari / firefox上，内容位于盒子内部，内容div的50％位于盒子中，而另外50％的时间位于盒子外面。我不知道该怎么做，因为它适用于Safari和firefox，并且出于某种原因，它在Chrome中折腾了。它可能只是我的电脑吗？有没有人遇到过这个问题？

由于

#wrapper{
   display: block;
   position: absolute;
   top: 5%;
   left: 0;
   margin: 0;
   padding: 0;
   width: 100%;
   height: 90%;
   background-color: #efefef;
}

#content{
   height:78px;
   width:100%;
   border-bottom:solid 1px gray;
   font-weight:1000;
   margin-left:0px !important;
   background-color:white;
}

Answer 1

您是否在box-sizing: border-box;上尝试了#wrapper？

Answer 2

使用position: absolute;时，它会从页面上的自然元素流中删除元素。如果你能够，你应该删除绝对位置。

请注意，如果您想使用高度百分比，则需要将顶级元素定义为100％。

body,html {
    width: 100%;
    height: 100%;
}

Body和HTML将从Window继承。然后页面上的所有其他元素将继承自body或html。

这是完整的：

body, html {
    width: 100%;
    height: 100%;
}

#wrapper{
    display: block;
    margin: 0;
    padding: 0;
    width: 100%;
    height: 90%;
    background-color: #efefef;
}

#content{
    height:78px;
    width:100%;
    border-bottom:solid 1px gray;
    font-weight:1000;
    margin-left:0px !important;
    background-color:white;
}

http://jsfiddle.net/twqxoc0j/

关于绝对的权衡，也是最重要的事情要记住定位是将这些元素从流动中移除页面上的元素。具有这种定位的元素不是受其他元素影响，不会影响其他元素。这个每次使用绝对时都要考虑一件严肃的事情定位。过度使用或不当使用会限制其灵活性你的网站。

来自：http://css-tricks.com/absolute-relative-fixed-positioining-how-do-they-differ/

嵌套Div在Chrome中出现故障

2 个答案: