0

次を使用して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 でロードされない理由を見つけるための助けをいただければ幸いです。私がテストした他のすべてのブラウザーでは問題なく動作するようです。ありがとう

4

1 に答える 1

2

どうしてこれをやったの？

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

削除しhtml:before,ます。

于 2012-10-06T22:29:19.983 に答える