Question

我一直在开发一个响应式wordpress主题，其设计需要一个固定宽度的侧栏用于导航。现在，我的工作相对较好，但不幸的是，css / html结构不允许我真正将实际内容相对于身体居中。为了解决这个问题，我为内容添加了一个右边距，其宽度与固定宽度边栏相同。

这在firefox中完全正常并且正如预期的那样，但在chrome中被破坏了。

浏览器宽度与边距一起使用的方式似乎存在问题。

HTML：

<div class="container">
    <header>
        <img src="http://panzerphotography.com/include/title.png">
        Some header content
    </header>
    <div class="content">
        <div class="inner-content">
            <div class="main">
                <img width="200" height="200" src="http://panzerphotography.com/bridal.jpg"/>

            </div>
       </div>
    </div>
</div>

CSS：

body, html{
        height:100%;
        background:grey;
        display:block;
        margin:0;
}
img{
    max-width:100%;
}


*{
    box-sizing:border-box;
 }
.container{
    padding-left:300px;
    min-height:100%;
}
.content{
    width:100%;
    min-height:100%;
    float:left;
    position:relative
}
.inner-content{
    text-align:center;
    overflow:auto;
    width:96%;
    max-width:1200px; 
    margin: 0 auto;
    margin-right:300px;
}

header{
    width:300px;
    margin-left:-300px;
    float:left;
    position:relative
}
.main{
    margin: 0 auto;
    max-width:300px;
}

这是我的问题的小提琴：

http://jsfiddle.net/2Fvqx/1/

如果使用firefox，图像会正确调整大小并且没有元素重叠。在chrome中，主要内容与标题重叠，适用于小屏幕尺寸。

编辑：很确定这是一个铬虫。 Chrome正在计算margin-left：auto的负值;根据规范，它应该评估0.在这里向铬提交一份错误报告：https://code.google.com/p/chromium/issues/detail?id=331454&thanks=331454&ts=1388721494。

仍然不相信firefox的行为是100％正确的，但它似乎更符合规范。

保证金行为和chrome vs firefox中的浏览器窗口

0 个答案: