以下是我的投资组合网站主页的源代码。我正在尝试将所有内容集中在此页面上，我已经在Safari，IE8和Firefox中进行了测试。如果我没有浮动菜单，它的比例在IE8中会发生巨大变化。有没有人对这些浏览器中的中心布局有建议或者在我的代码中看到相互矛盾的问题？
.nav {
margin-left: auto;
margin-right: auto;
width: 100%;
}
nav ul {
text-align: center;
padding: 0;
margin: 0;
float: left;
clear: right;
list-style: none;
overflow: hidden;
}
nav li {
float: left;
clear: right;
margin: 2 2px 0 2;
padding: 6px;
display: inline-block;
border: inset;
border-width: 2px 2px 2px 2px;
border-color: red;
border-radius: 8px;
background: red;
}
nav li a {
padding: 0 14px;
}
nav li:hover {
color: white;
opacity: 0.4;
filter: alpha(opacity=100);
}
.vs {
float: left;
clear: left;
}
a {
text-decoration: none;
border-bottom: none;
color: white;
}
p a:hover {
text-decoration: none;
color: red;
}
html {
font-family: sans;
color: white;
padding: 10px 460px;
background-color: 63737e;
}
.video {
width: 100%;
}
.sri {
float: left;
clear: left;
}
hr {
color: red;
border-style: dotted;
}
#content h1 {
text-decoration: underline;
}
p {
word-spacing: normal;
text-align: left;
width: 100%;
}
.ribbon {
float: right;
}
.design {
margin-left: auto;
margin-right: auto;
width: 70%;
}
.design2 {
position: relative;
right: 0;
bottom: 0;
}
.footer img {
margin-left: auto;
margin-right: auto;
width: 70%;
}
.background {
margin: 0px;
padding: 0px;
border-style: solid;
border-width: 100px;
border-color: 2f363b;
background-color: 2f363b;
border-radius: 7px 7px 7px 10px;
}<!DOC TYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<title>vslateart.com</title>
<link rel="stylesheet" href="index.css">
</head>
<body>
<div class="background" />
<header>
<div class="nav" />
<nav>
<ul>
<li><a href="http://www.vslateart.com/index.html">Home</a>
</li>
<li><a href="http://www.vslateart.com/logos-page.html">Logos</a>
</li>
<li><a href="http://www.vslateart.com/clothing-and-apparel.html">Clothing & Apparel</a>
</li>
<li><a href="http://www.vslateart.com/miscellaneous-art.html">Miscellaneous Art</a>
</li>
<li><a href="http://www.vslateart.com/3d-design.html">3D Design</a>
</li>
<li><a href="http://www.vslateart.com/biography.html">Bio</a>
</li>
<li><a href="http://www.vslateart.com/contact.html">Contact</a>
</li>
</ul>
</nav>
</div>
</header>
<br>
<div class="vs" />
<img src="http://www.vslateart.com/images/VS Logo.png" width="100" height="100" alt="VS Logo">
</div>
<br>
<br>
<div class="intro" />
<h1>Welcome to VS Art!</h1>
</div>
<p>Vincent Slate is a graphic artist in Phoenix, Arizona who specializes in logo design, web design,
<br>clothing and merchandise design and 3D visual design. Proficient in Adobe Photoshop, Illustrator, 3ds Max
<br>and many other software programs, Vincent's creative approach to the world of digital art has no limits. <a href="http://www.vslateart.com/biography.html">READ MORE...</a>
</p>
<h1>Services</h1>
<div class="video" />
<object type="application/x-shockwave-flash" data="http://www.vslateart.com/video/homepage-services0.swf" width="1000" height="600">
<param name="movie" value="http://www.vslateart.com/video/homepage-services0.swf" />
</object>
</div>
<br>
<br>
<div class="sri" />
<img src="http://www.vslateart.com/images/sri-logo-website.jpg" width="1000" height="250" alt="SRI Logo">
</div>
<p><strong>Starkweather Roofing, Inc. Logo:</strong> This logo was designed for Starkweather Roofing, one of the leading commercial roofing companies in Phoenix, Arizona. This logo was displayed on a banner at Chase Field, Home of the Arizona Diamondbacks
in 2013! For more information on Starkweather Roofing, Please visit: <em><a href="http://www.starkweatherroofing.com/">Starkweather Roofing Official Website</a>
</em>
<hr>
<br>
<h1>Official Trail of Painted Ponies Artist</h1>
<br>
<div class="design" />
<a class="fancybox" rel="group" href="http://www.vslateart.com/images/the-nights-watch.jpg">
<img src="http://www.vslateart.com/images/the-nights-watch.jpg" width="500" height="500" alt="The Nights Watch">
</a>
</div>
<div class="design2" />
<a class="fancybox" rel="group" href="http://www.vslateart.com/images/Process-figurine.jpg">
<img src="http://www.vslateart.com/images/Process-figurine-cropped.jpg" width="475" height="250" alt="The Nights Watch-Process">
</a>
<a class="fancybox" rel="group" href="http://www.vslateart.com/images/Process-back.jpg">
<img src="http://www.vslateart.com/images/Process-back-cropped.jpg" width="475" height="250" alt="The Nights Watch-Back">
</a>
</div>
<br>
<p>Vincent Slate became an Official <em>The Trail of Painted Ponies</em> Artist with his design, <em>"The Night's Watch."</em> This "Painted Pony" design won Third Place in the online voting for the <em>Magical Art Competition</em>, hosted by The Trail of
Painted Ponies. It was then specifically selected to be made into a figurine.
<em>"The Night's Watch"</em> will be crafted into a figurine and released in Fall 2015, available on shelves near you! For more information on <em>The Trail of Painted Ponies</em> and their design competitions, please click on the following link:
<em><a href="http://www.trailofpaintedponies.com/">The Trail of Painted Ponies Official Website</a></p></em>
<div class="ribbon" />
<img src="http://www.vslateart.com/images/ribbon.png" width="80" height="125" />
<div>
<!-- Add jQuery library -->
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<!-- Add fancyBox -->
<link rel="stylesheet" href="source/jquery.fancybox.css" type="text/css" media="screen" />
<script type="text/javascript" src="source/jquery.fancybox.pack.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$(".fancybox").fancybox();
});
</script>
</body>
<footer>
<a href="https://www.facebook.com/pages/VSlateArt/154385924572554?ref=bookmarks" />
<img src="http://www.vslateart.com/images/Facebook_Logo.png" width="80" height="80" />
</a>
<a href="https://www.linkedin.com/profile/view?id=191083044&trk=nav_responsive_tab_profile">
<img src="http://www.vslateart.com/images/linkedin_logo.png" width="80" height="80" />
</a>
</footer>
</div>
</html>
- vslateart 31分钟前