Github页面渲染不正确

时间:2015-08-03 07:56:02

标签: html github-pages

我浏览了论坛,但遗憾的是找不到我想要的答案 - 基本上我有一个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&amp;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,如果这有帮助 - 说实话,我真的很挣这个,所以非常感谢先进。

干杯

1 个答案:

答案 0 :(得分:0)

所以我昨晚设法解决了...在使用W3C代码检查程序和清理代码等之后,问题在跨浏览器检查时得到修复,但在服务器运行时仍然不在我的本地PC上 - 我比意识到看到它是一些社交链接和一个电子邮件形式,也许它被我的AdBlock扩展程序阻止了......瞧,这就是原因!

@Pete - 你的观点也非常好我将在本周晚些时候计划实施这项改进。

再次感谢所有人 - 希望有人可以使用它来至少证明这不是原因,如果他们将来会遇到一些小问题。

干杯