我正在尝试自学网页设计,并且刚刚开始掌握基础知识。我刚刚为一家假想的餐厅完成了我的练习网站的内容,并为此感到非常自豪,因为它在谷歌浏览器中完美运行,但当我检查它在IE和Firefox中的外观时,似乎CSS样式不是完全注册。
这是主页的代码。该网站还包含图像和其他页面的链接,但我真正关心的是让CSS在所有浏览器中正确应用。
/* Created on : Mar 23, 2015, 3:16:56 PM
Author : Dan
*/
*{
margin:0;
padding: 0;
}
header, nav, aside, article, footer, section {
display: block;
}
figure{
position: relative;
vertical-align: middle;
}
figcaption{
position: absolute;
top: 0;
left: 0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
width: 20%;
padding: .5%;
font-family: 'Smokum', Georgia, Serif;
color: #952706;
font-size: 6em;
text-shadow: 2px 2px black;
}
body{
text-align: center;
background-image: url("Frontier_images/wood084.jpg");
}
body article{
text-align: left;
}
header{
display: inline-block;
overflow:hidden;
margin:0 auto;
border:none;
max-height: 99%;
max-width: 99%;
background-color: rgba(250,240,230,.0);
}
nav{
margin:0 auto;
height: 100%;
min-height: 20px;
background-color: burlywood;
border:solid 2px #4c2e16;
border-radius: 20px;
padding: 1%;
}
nav a{
display: block;
margin:0 auto;
height: auto;
width: 14.28%;
float: left;
text-decoration: none;
outline: none;
text-align: center;
font-family: 'Bitter', serif;
font-size: 1.3em;
font-weight: bold;
color: darkred;
}
nav a:hover{
text-decoration: none;
font-family: 'Bitter', serif;
font-style: italic;
font-weight:bold;
color: firebrick;
}
#mininav{
bottom: 0;
left: 0;
position: fixed;
margin:0 auto;
height:2%;
width: 40%;
background-color: firebrick;
padding: 1%;
}
#mininav a{
display: block;
margin:0 auto;
height: auto;
width: 19%;
float: left;
text-decoration: none;
outline: none;
text-align: center;
font-family: sans-serif;
font-size: .75em;
color: white;
font-weight: bold;
}
article a{
outline: none;
font-family: 'Bitter', Georgia, Serif;
font-size: 1.1em;
color: darkred;
}
article a:hover{
font-style: italic;
outline: none;
font-family: 'Bitter', Georgia, Serif;
font-size: 1.1em;
color: firebrick;
}
article a:visited{
outline: none;
font-family: 'Bitter', Georgia, Serif;
font-size: 1.1em;
color: purple;
}
div * p {
text-indent: 5%;
}
#wrapper{
width: 80%;
margin:0 auto;
background-color: firebrick;
color: burlywood;
box-shadow:-8px 8px 10px -1px black;
padding: 2%;
overflow: hidden;
}
#spillwrapper{
width: 80%;
margin:0 auto;
background-color: firebrick;
color: burlywood;
box-shadow:-8px 8px 10px -1px black;
padding: 2%;
overflow: visible;
}
h1{
font-size: 3em;
font-family: 'Smokum', Georgia, Serif;
text-decoration: none;
margin-bottom: .5em;
margin-top: .5em;
}
a h1{
font-size: 3em;
text-decoration: none;
color: black;
font-family: 'Smokum', Georgia, Serif;
margin-bottom: 0;
}
.menudrop{
list-style-type: none;
padding: 0;
margin-top: 1em;
}
.menudropitem{
padding: 0 1%;
width: 150%;
background-color: rgba( 178,34,34,.7);
font-size: 3em;
text-decoration: none;
color: black;
font-family: 'Smokum', Georgia, Serif;
}
ul{
list-style-position: inside;
}
hr{
color: firebrick;
margin-top:2em;
margin-bottom: 2em;
border-top: dotted 1px;
}
.column1{
display: block;
position: relative;
padding: 1.5%;
z-axis: 2;
background-color: rgba(250,240,230, .7);
color: black;
font-size: 1.1em;
width: 60%;
float: left;
margin-top: 2%;
border-radius: 10px;
}
.column2{
display: block;
position: relative;
padding: 1.5%;
z-axis: 2;
background-color: rgba(250,240,230,.7);
color: black;
font-size: 1.2em;
width: 33%;
margin-top: 2%;
float: right;
border-radius: 10px;
}
.center{
display: block;
position: relative;
padding: 1.5%;
z-axis: 2;
background-color: rgba(250,240,230, .7);
color: black;
font-size: 1em;
font-family: georgia, serif, arial;
width: 60%;
margin: 0 auto;
margin-top: 2%;
border-radius: 10px;
}
footer{
margin: 0 auto;
padding: .5em;
font-weight: bold;
background: white;
background: rgba(255,255,255,.2);
color: darkred;
font-family: sans-serif;
font-size: .8em;
font-style: italic;
height: 100%;
width: 50%;
border-radius: 10px;
text-align: center;
}
table.thumbs{
margin-left: auto;
margin-right: auto;
}
table.thumbs td{
position: relative;
padding: 0 2px;
}
table.thumbs img.small{
width: 100px;
height:100px;
}
/* Large images in left two columns */
table.thumbs img.left {
position: absolute;
top: 50%;
left: 50%;
z-index: 10;
visibility: hidden;
}
/* Large images in right two columns */
table.thumbs img.right {
position: absolute;
top: 50%;
right: 50%;
z-index: 10;
visibility: hidden;
}
/* Hover on any table cell */
table.thumbs td:hover img.left,
table.thumbs td:hover img.right,
table.thumbs td:hover img.bottomright,
table.thumbs td:hover img.bottomleft{
visibility: visible;
}
#imgleft{
width: 100%;
height: 33%;
margin-bottom: 6px;
}
#imgleft img{
margin-right: 6px;
}
#imgleft p{
text-indent: 5%;
margin-right: 45%;
}
#imgright{
width: 100%;
height: 33%;
float: right;
text-align: right;
margin-bottom: 6px;
}
#imgright img{
margin-left: 6px;
}
#imgright p{
text-indent: 5%;
margin-left: 50%;
}
#imgleft2{
width: 100%;
height: 33%;
margin-bottom: 6px;
float: left;
}
#imgleft2 img{
margin-right: 6px;
}
#imgleft2 p{
text-indent: 5%;
margin-right: 45%;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Frontier</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<link href="frontierstyle.css" rel="stylesheet" type="css/text">
<link href='http://fonts.googleapis.com/css?family=Bitter' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Smokum' rel='stylesheet' type='text/css'>
</head>
<body>
<header>
<figure>
<img src="Frontier_images/eggskillet.jpg" alt="Egg Skillet">
<figcaption>Frontier</figcaption>
</figure>
</header>
<nav>
<a href="frontiermenu.html">Menu</a>
<a href="frontierevents.html">Events</a>
<a href="frontiergallery.html">Gallery</a>
<a href="frontierfamily.html">Our Family</a>
<a href="frontierfaq.html">FAQ</a>
<a href="frontiercontact.html">Contact Us</a>
<a href="frontierdirections.html">Directions</a>
</nav>
<div id="wrapper">
<article>
<h1>
Hours:
</h1>
<h2>
Mon- Closed<br>
Tues thru Sat- 6am until 1pm<br>
Sun- 8am until 3pm
</h2>
</article>
<section class=column1>
<h1>
Frontier's Concept
</h1>
<p>
Frontier is the first franchise developed by former President of the U.S. Theodore Roosevelt.
Teddy, as he is known to his friends and family, always had a dream of creating
a breakfast house that captured the look and feel of a specific time and place that was
very dear to him.</p>
<p>
Frontier is the realization of that dream. Tucked away in the heart of the pocono mountains,
our establishment seeks to give our guests not only a delicious breakfast, but a completely immersive
experience as well.</p>
<br>
<img src=Frontier_images/cabinflag.jpg>
</p>
</section>
<section class=column2>
<h1>
Accolades
</h1>
<p>
"Killer food, great atmosphere and the friendliest chef."
~City Weekly
</p><br>
<p>
"This might be the quintessential Northern PA restaurant.
The antique log cabin radiates mountain hospitality and the beauty and
bounty of the Poconos are apparent on each plate."
~Happenings Magazine
</p><br>
<p>
"10 Best Restaurants in PA: Local Food and Fine Dining"
~The Culture Trip
</p><br>
</section>
</div>
<footer>
<p>
Frontier Restaurant. All Rights Reserved.
</p>
</footer>
</body>
</html>