0
因此，我目前正在重建我的投資組合，並且之前已經使用HTML5構建過網站，並且從未見過這種情況。我想知道我是否正確使用了標籤，如果這是導致斷開的原因。這是我見過的HTML/CSS斷開連接的最奇怪的瀏覽器
Here's a live link所以你可以嘗試它自己和代碼將隨之而來。
如果你看一下這個頁面在Firefox中，一切都在這裏應該是（順便說一句，這僅適用於內頁，而不是指數）而是看它在Safari或Chrome。然後，檢查元素，你會注意到標籤'section'以及該標籤內的所有內容都沒有被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:[email protected]?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 {
}
錯誤的網站，應該在此處發佈工作代碼，將其標記爲將其移至SO。 – tomdemuyt
@LisaRose：有一些JavaScript lint程序將檢查語法（和其他）錯誤的代碼。 –