2015-01-09 87 views
0

我寫了一個沒有任何功能的小網頁。當我在瀏覽器中直接打開此頁面時,白色框將與瀏覽器垂直調整大小。但是如果我在流星中運行這個白盒子將不會超過400像素。奇怪的css流星行爲

我比較了所有使用chrome工具的元素,但所有css屬性在兩個版本中看起來都是相同的。

要在普通瀏覽器中測試它,樣式錶鏈接必須啓用。

的index.html:

<head> 
</head> 
    <!--link href="main.css" rel="stylesheet"/--> 
<body> 
    <div id="messages" class="relative content-box"> 
     <div id="chat-box" class=""></div> 
    </div> 
</body> 

的main.css:

body { 
    background-attachment: scroll; 
    background-size: cover; 
    background-color: #004269; } 

.content-box { 
    background-color: white; 
    padding: 15px; } 

.relative { 
    position: relative; } 

#messages { 
    margin: 0; 
    position: relative; 
    min-height: 400px; 
    padding: 10px; } 

#chat-box { 
    position: relative; 
    min-height: inherit; 
    padding-top: 0px; 
    height: 100%; 
    padding-left: 10px; 
    padding-right: 10px; 
    overflow-y: hidden; 
    overflow-x: hidden; } 

html { 
    min-height: 100%; 
    position: relative; } 

body { 
    margin-bottom: 190px; 
    margin-top: 112px; } 

.content-box { 
    margin-left: 0px; 
    margin-right: 0px; 
    margin-bottom: 5px; 
    margin-top: 5px; } 

回答