我浏览了论坛,但遗憾的是找不到我想要的答案 - 基本上我有一个HTML页面,在Chrome中本地呈现完美但是当上传到GitHub时它渲染不正确(较低的订阅形式和社交弹出菜单中的图标) 我通过一些跨浏览器兼容性工具运行它,它似乎在大约70%的浏览器上正确呈现。我真的不确定原因是什么,会对这个有一些帮助。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<link rel="shortcut icon" href="assets/ico/favicon.ico">
<title>WEAVE.</title>
<!-- Bootstrap core CSS -->
<link href="assets/css/bootstrap.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="assets/css/style.css" rel="stylesheet">
<link href="assets/css/font-awesome.min.css" rel="stylesheet">
<link href="assets/js/fancybox/jquery.fancybox.css" rel="stylesheet" />
<!-- Just for debugging purposes. Don't actually copy this line! -->
<!--[if lt IE 9]><script src="../../assets/js/ie8-responsive-file-warning.js"></script><![endif]-->
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body data-spy="scroll" data-offset="0" data-target="#theMenu">
<!-- Menu -->
<nav class="menu" id="theMenu">
<div class="menu-wrap">
<h1 class="logo"><a><img class="img-responsive" src="assets/img/logo-text.png" alt="WEAVE."></a></h1>
<i class="fa fa-times menu-close"></i>
<a href="#home" class="smoothScroll">Home</a>
<a href="#about" class="smoothScroll">About</a>
<a href="#contact" class="smoothScroll">Contact</a>
<a href="#"><i class="fa fa-facebook"></i></a>
<a href="#"><i class="fa fa-twitter"></i></a>
<a href="#"><i class="fa fa-envelope"></i></a>
</div>
<!-- Menu button -->
<div id="menuToggle"><i class="fa fa-bars"></i></div>
</nav>
<section id="home" ></section>
<div id="headerwrap">
<div class="container">
<div class="row">
<div class="col-md-6 col-md-offset-3">
<h1><a><img class="img-responsive" src="assets/img/logo.png" alt="WEAVE."></a></h1>
</div>
</div><!--/row-->
</div><!--/container-->
</div><!--/headerwrap-->
<section id="about"></section>
<div id="aboutwrap">
<div class="container">
<div class="row">
<div class="col-lg-4 name">
<img class="img-responsive" src="assets/img/pic.png" alt="WEAVE.">
<p>WHATS IT ABOUT?</p>
<div class="name-label"></div>
</div><!--/col-lg-4-->
<div class="col-lg-8 name-desc">
<h2>THE BEST MOMENTS<br/>ARE THE ONES WE FIND<br/>WHILE LOOKING FOR SOMETHING ELSE</h2>
<div class="name-zig"></div>
<div class="col-md-6">
<p>Being loved, sad, determined and hopeful are just a few of the thousands of emotions that we all commonly share between us. Describing these important moments with words alone doesn’t usually live up to how we truly feel. Creating a small post that captures our thoughts, and connects it with its abstract surroundings; allows us to illustrate the real value and importance that words alone sadly can’t.</p>
<p>Weave is all about reflecting on special moments and exploring how they mesh and interact with the world.</p>
</div>
<div class="col-md-6">
<p>It’s not designed to be searched or filed away, but to be randomly explored like stumbling upon an obscure and insightful message with a friend.</p>
<p>Spending some time to explore through Weave gives us a chance to experience and feel that we normally forget. Weave leads us to states of mind, feelings and those little hidden inward passages that we’d otherwise rarely visit.</p>
<p>Because the best moments are always the ones we stumble upon while looking for something else.</p>
</div>
</div><!--/col-lg-8-->
</div><!-- /row -->
</div><!-- /container -->
</div><!-- /aboutwrap -->
<!--ABOUT SEPARATOR-->
<section id="contact"></section>
<!--CONTACT SEPARATOR-->
<div class="sep contact" data-stellar-background-ratio="0.5"></div>
<div id="contactwrap">
<div class="container">
<div class="row">
<div class="col-lg-6">
<p>GET IN CONTACT</p>
<p>Dont worry, that warm tingling in your fingers is only your animalistic urge to give us a shout! Feel free to hop onto our mailing list or just drop us a message - We would love to hear from you.</p>
<p><small><a href="http://www.google.com/">Twitter</a><br/>
<a href="http://www.google.com/">Facebook</a></small></p>
</div>
<div class="col-lg-6">
<form action="http://weave.us11.list-manage.com/subscribe/post?u=a728b31e70e478151dac586df&id=adea7a56c1" id="mc-embedded-subscribe-form" method="post" name="mc-embedded-subscribe-form" class="validate" target="_blank">
<div class="form-group"></div>
<label for="mce-NAME">Your Name</label>
<input class="form-control" name="NAME" type="text" id="mce-NAME" placeholder="Enter Name" data-validate="validate(required, email)" required="required">
<label for="mce-EMAIL">Email Address</label>
<input class="form-control" name="EMAIL" type="email" id="mce-EMAIL" placeholder="Enter Email" data-validate="validate(required, email)" required="required">
<label for="mce-MMERGE3">Message</label>
<textarea class="form-control" rows="3" name="MMERGE3" id="mce-MMERGE3"></textarea>
<br>
<button type="submit" class="btn btn-default">Submit</button>
</form>
</div>
</div><!--/row-->
</div><!--/container-->
</div>
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="assets/js/classie.js"></script>
<script src="assets/js/bootstrap.min.js"></script>
<script src="assets/js/smoothscroll.js"></script>
<script src="assets/js/jquery.stellar.min.js"></script>
<script src="assets/js/fancybox/jquery.fancybox.js"></script>
<script src="assets/js/main.js"></script>
<script>
$(function(){
$.stellar({
horizontalScrolling: false,
verticalOffset: 40
});
});
</script>
<script type="text/javascript">
$(function() {
// fancybox
jQuery(".fancybox").fancybox();
});
</script>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-65614881-1', 'auto');
ga('send', 'pageview');
</script>
</body>
</html>
该页面位于www.weave.ws,如果这有帮助 - 说实话,我真的很挣这个,所以非常感谢先进。
干杯
答案 0 :(得分:0)
所以我昨晚设法解决了...在使用W3C代码检查程序和清理代码等之后,问题在跨浏览器检查时得到修复,但在服务器运行时仍然不在我的本地PC上 - 我比意识到看到它是一些社交链接和一个电子邮件形式,也许它被我的AdBlock扩展程序阻止了......瞧,这就是原因!
@Pete - 你的观点也非常好我将在本周晚些时候计划实施这项改进。
再次感谢所有人 - 希望有人可以使用它来至少证明这不是原因,如果他们将来会遇到一些小问题。
干杯