Question

我有这个设置：

<div id="appBody">
     <div id="appLeftPane">
         <div id="resizer">

         </div>
     </div>
     <div id="appRightPane">

     </div>
<div>

resizer与jQuery大小调整功能绑定。

CSS：

#appBody {
    float: left;
    min-height: 650px;
    height: 100%;
    min-width: 1200px;
    background: #fefefe;
}

#appLeftPane {
    float: left;
    height: 100%;
    background-color: #fefefe;
    padding: 0;
    vertical-align: top;
}

#appRightPane {
    height: 100%;
    min-height: 650px;
    padding: 5px 5px 5px 10px;
    border-left: 1px solid #cecece;
    white-space: nowrap;
    overflow-y: auto;
    overflow-x: scroll;
}

#resizer {
    width:300px; 
    height:100%; 
    min-height: 650px; 
    float: left;   
}

左侧的内容保留在div（不是#appLeftPane）中。当您向右调整内容大小，从而缩小#appRightPane div时，我将其设置为overflow:auto。这适用于除Chrome for Windows以外的所有浏览器。

在Chrome上，因为我没有在#appRightPane上设置宽度，所以它只有大约100px宽，其余的都是隐藏的。所有其他浏览器将div设置为剩余宽度的100％。

如果我删除了溢出属性，那么它会在Chrome中显示，但在Chrome和所有其他浏览器中，整个div会在左侧div下方出现错误。（当我尝试设置宽度或最小宽度时会发生同样的事情。）

有人能看到发生了什么吗？

Answer 1

显然，Chrome存在某种溢出和隐藏内容的错误。

我只是做了这个并解决了问题：

clear: right上的

#appRightPane。

清除右边似乎将div的宽度一直向右推（向右）。这对其他浏览器没有负面影响。

Chrome中未指定CSS宽度导致Div调整问题

1 个答案: