所以，我目前正在重建我的投资组合，我之前使用HTML5建立了网站，从未见过这个。我想知道我是否正确使用了标签，如果这是导致断开的原因。
Here's a live link所以你可以自己尝试一下，然后代码就会出现。
如果你在Firefox中查看这个页面，一切都在这里它应该是（顺便说一下，这只适用于内部页面，而不是索引）但是在Safari或Chrome中查看它。然后，检查元素，您将注意到标记'section'和该标记内的所有内容都没有被css中的浏览器看到。
现在，是什么让我觉得这个标签之外我不知道的是当我把它改成'div并给出一类节时，仍然有相同的结果。
我也尝试过Modernzr，而'section'标签甚至没有出现在列表中。而且，它验证100％。
注意：我删除了很多无关的内容，使大纲完好无损。例如，'ul'标签都有多个订单项。我担心非必要的代码妨碍了一个干净的视图。
已编辑的代码：已添加类到部分以尝试在浏览器中捕获它，并添加了section标记的CSS。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="keywords" content="Lisa Reisman, portfolio, web design, Atlanta, Georgia, print, photography, responsive web design, CSS3, HTML5, javascript, transitions, ">
<meta name="description" content="The portfolio of freelance designer Lisa Reisman, interactive and print, photography and planning in Altanta, Georgia.">
<title>Lisa Reisman Portfolio - About Lisa</title>
<link href="css/keyframes.css" media="screen, projection" rel="stylesheet" type="text/css" />
<link href="css/basic.css" media="screen, projection" rel="stylesheet" type="text/css" />
<!--jquery-->
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript">
$(document).ready(function(onclick) {
$("a#about").addClass("slideDwn");
$("a#inter").addClass("slideUp");
$("a#print").addClass("slideUp");
$("a#photo").addClass("slideUp");
}
</script>
<!--modernizer-->
<!-- <script src="js/modernizr.custom.71520.js"></script> -->
<!--google analytics-->
</head>
<body id="about_pg">
<main id="wrap">
<aside>
<div id="sidehead"><a href="index.html" title="Lisa Reisman Portfolio Web Site"><span class="l">L</span> <span class="r">R</span></a></div>
<div id="sidenav">
<ul id="subnav">
<li><a id="about" class="slide" href="about.html" title="About Lisa Reisman">A</a><span class="word">bout</span></li>
<li><a id="inter" class="slide" href="interactive.html" title="Lisa Reisman Interactive Projects">I</a></li>
<li><a id="print" class="slide" href="print.html" title="Lisa Reisman Print Work">P</a></li>
<li><a id="photo" class="slide" href="photo.html" title="Lisa Reisman Photography">Ph</a></li>
</ul>
</div><!--end side nav-->
</aside><!--end aside-->
<div id="innersocial">
<ul id="contact">
<li><a href="https://www.facebook.com/lisarosereis" title="Lisa Reisman Facebook" rel="external"><img src="i/lisareisman-facebook.png" alt="Lisa Reisman Facebook" /></a></li>
<li><a href="www.linkedin.com/pub/lisa-reisman/9/22a/912/" title="Lisa Reisman LinkedIN" rel="external"><img src="i/lisareisman-linkedin.png" alt="Lisa Reisman Facebook" /></a></li>
<li><a href="https://twitter.com/LisaRose_webD" title="Lisa Reisman Twitter" rel="external"><img src="i/lisareisman-twitter.png" alt="Lisa Reisman Facebook" /></a></li>
<li><a href="#" title="Lisa Reisman MySpace"><img src="i/lisareisman-myspace.png" alt="Lisa Reisman Facebook" /></a></li>
<li><a href="mailto:lisa.reisman@lisareisman.com?subject=Saw%20Your%20Web%20Site" title="Lisa Reisman Email"><img src="i/lisareisman-email.png" alt="Lisa Reisman Email" /></a></li>
</ul>
</div><!--end inner social div-->
<section class="section" id="about-nav">
<ul>
<li class="btn"><a href="#openTech" title="Lisa Reisman Techincal Knowledge">Technical</a></li>
<li class="btn"><a href="#openIndus" title="Lisa Reisman Industries Experience">Industries</a></li>
<li class="btn"><a href="i/ReismanResume13.pdf" title="Lisa reisman Resume 2013" rel="external">Resume</a></li>
</ul>
</section><!--end section nav-->
<div id="openTech" class="modalDialog">
<div>
<a href="#close" title="close" class="close">X</a>
<a href="i/ReismanResume13.pdf" title="Lisa Reisman Resume 2013"><img src="i/lisareisman-download_resume.png" alt="Lisa Reisman Resume" /></a>
<h2>Technical Knowledge</h2>
<h3>Advanced</h3>
<h4>Apps</h4>
<ul>
<li>Illustrator • </li>
</ul>
<h4>Developer Tools</h4>
<ul>
<li>DreamWeaver • </li>
</ul>
<h4>On-The-Job Skills</h4>
<ul>
<li>Organized • </li>
</ul>
<h4>General Advanced Abilities</h4>
<ul>
<li>Responsive Web Design • </li>
</ul>
<h3>Intermediate</h3>
<h4>Apps & Frameworks</h4>
<ul>
<li>After Effects • </li>
</ul>
<h4>Developer Tools</h4>
<ul>
<li>PHP/MySQL • </li>
</ul>
<h3>Working on Expanding Knowledge</h3>
<h4>Apps, Frameworks & Miscellaneous</h4>
<ul>
<li>Bootstrap • </li>
</ul>
<h3>Platforms</h3>
<ul>
<li>Apple • </li>
</ul>
</div>
</div><!--end tech modal-->
<div id="openIndus" class="modalDialog">
<div>
<a href="#close" title="close" class="close">X</a>
<h2>Industry Experience</h2>
<ul>
<li>Medical • </li>
</ul>
</div>
</div><!--end industries modal-->
</main><!--end wrap-->
</body>
</html>
/*=== PAGE CONTENT ===*/
section.section {
width: 680px;
float:left;
margin: -285px 62px 0px 205px;
opacity: 1;
}
section.section .fade {
opacity: .0;
animation: fade .75s ease;
-webkit-animation: fade .75s ease;
-o-animation: fade .75s ease;
-moz-webkit-animation: fade .75s ease;
}
section.section .switch {
-webkit-transition: margin-top .75s ease .5s;
-moz-transition: margin-top .75s ease .5s;
-o-transition: margin-top .75s ease .5s;
transition: margin-top .75s ease .5s;
}
section.section li:first-child.btn {
padding-right: 16px;
}
section.section li.btn {
height: 66px;
width: 300px;
font-size: 3em;
line-height: 2.0;
padding: 0px 16px 0 7px;
}
section.section li a {
/* padding: 0 7px; */
-moz-border-radius: 7px;
-webkit-border-radius: 7px;
border-radius: 7px;
border: thin solid #000000;
}
section.section li a img {
}
答案 0 :(得分：2)
至少你缺少jQuery中的右括号
$(document).ready(function(onclick) {
$("a#about").addClass("slideDwn");
$("a#inter").addClass("slideUp");
$("a#print").addClass("slideUp");
$("a#photo").addClass("slideUp");
}); // You were missing );
答案 1 :(得分：0)
对于没有float:left;或width的小圈子，请使用height。它将根据文本的大小进行调整
根据需要添加一些padding。
如果没有jquery（只有普通javascript和CSS），您的代码就会缩短。