当我在内部时,我的所有CSS在FF,Safari,IE,Opera和Chrome中运行良好。我复制并将其移动到外部样式表。在FF,Safari和IE中,一切看起来都不错,但在Opera(27)和Chrome(41)中,大多数样式都很好,但有些布局被打破了。它似乎只是在页面顶部有一些div浮动问题。
任何人都知道为什么我只会遇到一些规则问题(这意味着它会链接到css文件),只在外部而且只在Chrome和Opera中?
CSS和HTML都会验证。
<head>
<meta charset="utf-8">
<title>Drum Lessons</title>
<link href='http://fonts.googleapis.com/css?family=Cabin' rel='stylesheet' type='text/css'>
<link href="style_copy.css" rel="stylesheet" type="text/css">
</head>
body {
width: 1020px;
margin: 0 auto;
font-family: Futura, 'Cabin', Arial, sans-serif;
/* font-weight: light; */
font-size: 1em;
background-color: #696969;
}
h2 {
width: 220px;
margin: 0 auto;
padding-bottom: 10px;
font-weight: normal;
/* font-style: italic; */
}
#header {
width: 1020px;
height: 120px;
background-image: url('images/header_bg.jpg');
}
#header-border {
width: 1002px;
height: 102px;
border: 9px solid black;
}
#navicons {
list-style-type: none;
float: right;
margin-right: 30px;
margin-top: 30px;
}
#navicons li {
display: inline;
margin-left: 20px;
}
#main-logo {
margin-left: 100px;
margin-top: 40px;
}
#feature {
width: 1020px;
height: 546px;
background-image: url('images/sunburst_bg.jpg');
/** border-right: 9px solid black;
border-left: 9px solid black;
border-bottom: 9px solid black; **/}
#feature-border {
width: 1002px;
height: 538px;
border-right: 9px solid black;
border-left: 9px solid black;
border-bottom: 9px solid black;
}
我尝试删除谷歌字体链接 - 没有变化。还要确保html和css文件都是utf-8。在普通的董事会周围,但我在以前的问题中没有看到这个问题。
...谢谢