CSS導致空白頁鉻

Question

我有我加載到我的html頁面使用外部CSS樣式表：

<link rel="stylesheet" type="text/css" href="styles/styles.css" /> 

它工作在IE和Firefox很好，但是當我嘗試在Chrome中打開它我收到一個空白的白頁。

這裏是我的CSS：

@charset "UTF-8"; 
* { 
    margin: 0; 
padding: 0; 
} 
html, body{ 
height: 100%; 
} 
body { 
text-align: center; 
font-family: "Comic Sans MS", cursive; 
font-size: 16px; 
background-image: url(../Images/bg.jpg); 
background-repeat: repeat-x; 
background-attachment: fixed; 
background-position: center top; 
background-color: #FFFFFF; 
font-style: normal; 
font-weight: lighter; 
} 
#container { 
min-height: 100%; 
width: 780px; 
margin:0 auto; 
} 
html:before, #container:before { /* Opera and IE8 "redraw" bug fix */ 
content:""; 
float:left; 
height:100%; 
margin-top:-999em; 
} 
* html #container { /* IE6 workaround */ 
height:100%; 
} 
#bar { 
height: 20px; 
text-align: right; 
vertical-align: middle; 
padding-top: 0; 
padding-right: 10px; 
padding-bottom: 0; 
padding-left: 10px; 
} 
#bottom { 
width: 750px; 
height: 30px; /* negative margin-top equals height of #foot */ 
-moz-border-radius-topright: 10px; 
-moz-border-radius-topleft: 10px; 
-webkit-border-top-left-radius: 10px; 
-webkit-border-top-right-radius: 10px; 
margin-top: 10px; 
margin-right: auto; 
margin-bottom: 0; 
margin-left: auto; 
} 
#ribbon { 
background-image: url(../Images/ribbon.png); 
float: right; 
height: 775px; 
width: 1116px; 
overflow: visible; 
position: absolute; 
top: 0px; 
right: 0px; 
z-index: -1; 
visibility: visible; 
text-align:right; 
} 
#header { 
margin: 0; 
padding: 0px; 
width: 780px; 
height: 150px; 
} 
#logo { 
margin: 0px; 
padding: 0px; 
float: left; 
width: 50%; 
height: auto; 
border-top-width: 0px; 
border-right-width: 0px; 
border-bottom-width: 0px; 
border-left-width: 0px; 
border-top-style: none; 
border-right-style: none; 
border-bottom-style: none; 
border-left-style: none; 
} 
#menu { 
width: 750px; 
-moz-border-radius-topright: 10px; 
-moz-border-radius-topleft: 10px; 
-webkit-border-top-left-radius: 10px; 
-webkit-border-top-right-radius: 10px; 
} 
    #infheader{ 
-moz-border-radius-bottomright: 10px; 
-moz-border-radius-bottomleft: 10px; 
-webkit-border-bottom-left-radius: 10px; 
-webkit-border-bottom-right-radius: 10px; 
} 
.content{ 
margin: 0px; 
background-color: #FFF; 
text-align: left; 
clear:both; 
overflow: auto; 
padding-top: 10px; 
padding-right: 15px; 
padding-bottom: 20px; 
padding-left: 15px; 
min-height:100%; 
} 
#content{ 
-moz-border-radius: 10px; 
-webkit-border-radius: 10px; 
} 
.dark_brown{ 
background-color: #787272; 
text-align: left; 
color: #FFF; 
overflow: auto; 
padding-top: 10px; 
padding-right: 15px; 
padding-bottom: 20px; 
padding-left: 15px; 
} 
.spaces { 
height: 10px; 
} 
.light_brown { 
color:#000000; 
font-size: 12px; 
clear:both; 
padding: 15px; 
overflow:auto; 
} 
#directory{ 
width:50%; 
text-align:left; 
float:left; 
} 
#copyright{ 
width:50%; 
text-align:right; 
float:right; 
} 
#bar { 
-moz-border-radius: 10px; 
-webkit-border-radius: 10px; 
} 

.bold_yellow, .bold_dark_yellow { 
font-size: 20px; 
font-style: normal; 
line-height: normal; 
font-weight: normal; 
} 
.bold_yellow{ 
color: #FC0; 
} 
.bold_dark_yellow{ 
color:#C29C01; 
} 
.navigation, .navigation2{ 
font-family:Trajan Pro, serif; 
padding-top: 10px; 
padding-right: 15px; 
padding-bottom: 20px; 
padding-left: 15px; 
text-align: left; 
text-decoration: none; 
clear: both; 
} 
.navigation { 
background-color: #FFF; 
    font-family: "Comic Sans MS", cursive; 
} 
.navigation2 { 
background-color: #787272; 
color: #FFF; 
font-family: "Comic Sans MS", cursive; 
} 
.navigation a:link{ 
color: #000; 
text-decoration: none; 
} 
.navigation a:visited{ 
color: #000; 
text-decoration: none; 
} 
.navigation a:hover{ 
color: #FF8000; 
text-decoration: none; 
} 
.navigation a:active{ 
color: #999;  
text-decoration: none; 
} 
.navigation2 a:link{ 
color: #FFF; 
text-decoration: none; 
} 
.navigation2 a:visited{ 
color: #FFF; 
text-decoration: none; 
margin-right: 10px; 
} 
.navigation2 a:hover{ 
color: #FF8000; 
text-decoration: none; 
} 
.navigation2 a:active{ 
color: #333; 
text-decoration: none; 
} 
.quick_link a:link{ 
color: #000; 
text-decoration: none; 
} 
.quick_link a:visited{ 
color: #000; 
text-decoration: none; 
} 
.quick_link a:hover{ 
color: #FF8000; 
text-decoration: none; 
} 
.quick_link a:active{ 
color: #999;  
text-decoration: none; 
} 
.green_text{ 
font-family: "Comic Sans MS", cursive; 
color: #3C0; 
} 
.blue_text { 
font-family: "Comic Sans MS", cursive; 
color: #3FF; 
} 

我希望得到任何幫助，你可以找出爲什麼這個會不會在Chrome瀏覽器加載給，看來我已經測試過的所有其他瀏覽器沒有任何問題的工作。由於

Answer 1

你爲什麼要這麼做？

html:before, #container:before { 
content:""; 
float:left; 
height:100%; 
margin-top:-999em; 
} 

刪除html:before,。