html - CSS 导致 chrome 出现空白页面

标签 html css google-chrome

我有一个外部 css 样式表,我正在使用以下方法加载到我的 html 页面中:

<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 中加载,我将不胜感激,它似乎在我测试过的所有其他浏览器中都没有任何问题。谢谢

最佳答案

你为什么这样做?

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

删除 html:before,

关于html - CSS 导致 chrome 出现空白页面,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/12764394/

相关文章:

html - 如何在 HTML 中设置列​​表项的高度?

html - 经典的 asp 密码验证 sql

css - 是否可以在清晰度框架中垂直合并数据网格的单元格

HTML/CSS 嵌套左边框 : reiterative visual effect

html - 如何在 Google Chrome 上修复 1px 边距?

jquery - 如何在悬停时显示数据属性?

javascript - 尽管给出了高度, Owl Carousel 仍不显示图像

javascript - 如何将div放在表格元素前面

html - 插入文字效果适用于 Chrome,但不适用于 Firefox

html - 我的输入字段在 IE 上以内联方式呈现,但在 Chrome 和 Firefox 中以新行呈现。我该如何解决?