そのため、私は現在ポートフォリオを再構築しており、以前に HTML5 を使用してサイトを構築しましたが、これは見たことがありません。タグを適切に使用したかどうか、それが切断の原因であるかどうか疑問に思っています。
ここにライブリンクがあるので、自分で試すことができ、コードが続きます。
このページを Firefox で見ると、ここにすべてあるはずです (ちなみに、これはインデックスではなく内部ページにのみ適用されます) が、Safari または Chrome で見てください。次に、要素を調べると、「セクション」タグとそのタグ内のすべてが CSS のブラウザーに表示されていないことがわかります。
さて、私が見逃しているのはそのタグの外側にあると思わせるのは、それを 'div に変更し、セクションのクラスを指定しても同じ結果が得られたときです。
Modernzr も試しましたが、「セクション」タグはリストに表示されませんでした。そして、それは 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 {
}