Question

我有一些嵌套的div没有使用Chrome 26（稳定版）中的窗口正确调整大小，但它们在以前的版本和Firefox中都能正常工作。在我提交错误报告之前，我想确保我所看到的不是预期的标准行为，而我的其他浏览器却没有做好。

使用Chrome 26，尝试在this Plunkr上调整预览窗格的大小。 #inner元素将缩小或扩展超出其父级的范围，我不希望它执行此操作，以及在以前版本的Chrome或Firefox中不执行此操作。

将我的#outer div设置为绝对定位可以解决问题 - 除了我需要固定#outer div。我还注意到从position:absolute删除#main也解决了问题...但我需要#main绝对定位。

我不知道为什么会发生这种情况，或者即使这是预期的行为。我需要#inner子项使用其#outer父级调整大小，而不是单独使用#outer元素缩放。我怎样才能做到这一点？

HTML / CSS

<!doctype html>
<html>
<style>
#main {
    min-height: 100%;
    position: absolute;
    width: 100%;
}
#container {
    min-width: 400px;
    width: 50%;
    margin: auto;
    position: relative;
}
#outer {
   position: fixed;
   border: solid 2px black;
   margin-top: 100px;
   top: auto;
   max-height: 150px;
   position: fixed;
   width: 50%;
   min-width: 400px;
   margin: auto;
   background-color: green;
}

#inner {
    background-color: rgba(0,0,0,.5);
    padding: 10px;
    border: 2px gray dashed;
    position: relative;
}

</style>
<div id="main">
<div id="container">
    <div id="outer">
        <div id="inner">
            <input type="text">
        </div>
    </div>
</div>
</div>

Answer 1

如果您将主容器更改为position:fixed，如下所示，它将解决调整大小问题。不知道会对页面布局产生什么影响，但它看起来很相似。

#main 
{
    position:fixed;
    top:0;bottom:0;left:0;right:0;
    background-color:#d3fcee;
}

修复固定元素的子项的大小不正确

1 个答案: