0
Я просмотрел форумы, но, к сожалению, не смог найти ответы, которые я искал, - в основном у меня есть HTML-страница, которая отлично отображается локально в хроме, но при загрузке на GitHub она отображается неправильно (нижняя подписная форма и социальные значки в меню всплывающих окон) Я запускал ее с помощью некоторых инструментов совместимости с кросс-браузерами и, похоже, правильно отображал около 70% браузеров. Я действительно не уверен, в чем причина, хотел бы помочь в этом.Неверное отображение страницы Github
<!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">
\t \t
\t <!-- Menu -->
\t <nav class="menu" id="theMenu">
\t \t <div class="menu-wrap">
\t \t \t <h1 class="logo"><a><img class="img-responsive" src="assets/img/logo-text.png" alt="WEAVE."></a></h1>
\t \t \t <i class="fa fa-times menu-close"></i>
\t \t \t <a href="#home" class="smoothScroll">Home</a>
\t \t \t <a href="#about" class="smoothScroll">About</a>
\t \t \t <a href="#contact" class="smoothScroll">Contact</a>
\t \t \t <a href="#"><i class="fa fa-facebook"></i></a>
\t \t \t <a href="#"><i class="fa fa-twitter"></i></a>
\t \t \t <a href="#"><i class="fa fa-envelope"></i></a>
\t \t </div>
\t \t
\t \t <!-- Menu button -->
\t \t <div id="menuToggle"><i class="fa fa-bars"></i></div>
\t </nav>
\t <section id="home" ></section>
\t <div id="headerwrap">
\t \t <div class="container">
\t \t \t <div class="row">
\t \t \t \t <div class="col-md-6 col-md-offset-3">
\t \t \t \t \t <h1><a><img class="img-responsive" src="assets/img/logo.png" alt="WEAVE."></a></h1>
\t \t \t \t </div>
\t \t \t </div><!--/row-->
\t \t </div><!--/container-->
\t </div><!--/headerwrap-->
\t
\t <section id="about"></section>
\t <div id="aboutwrap">
\t \t <div class="container">
\t \t \t <div class="row">
\t \t \t \t <div class="col-lg-4 name">
\t \t \t \t \t <img class="img-responsive" src="assets/img/pic.png" alt="WEAVE.">
\t \t \t \t \t <p>WHATS IT ABOUT?</p>
\t \t \t \t \t <div class="name-label"></div>
\t \t \t \t </div><!--/col-lg-4-->
\t \t \t \t <div class="col-lg-8 name-desc">
\t \t \t \t \t <h2>THE BEST MOMENTS<br/>ARE THE ONES WE FIND<br/>WHILE LOOKING FOR SOMETHING ELSE</h2>
\t \t \t \t \t <div class="name-zig"></div>
\t \t \t \t \t
\t \t \t \t \t <div class="col-md-6">
\t \t \t \t \t \t <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>
\t \t \t \t \t \t <p>Weave is all about reflecting on special moments and exploring how they mesh and interact with the world.</p>
\t \t \t \t \t </div>
\t \t \t \t \t <div class="col-md-6">
\t \t \t \t \t \t <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>
\t \t \t \t \t \t <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>
\t \t \t \t \t \t <p>Because the best moments are always the ones we stumble upon while looking for something else.</p>
\t \t \t \t \t </div>
\t \t \t \t \t
\t \t \t \t </div><!--/col-lg-8-->
\t \t
\t \t \t </div><!-- /row -->
\t \t </div><!-- /container -->
\t </div><!-- /aboutwrap -->
\t
\t <!--ABOUT SEPARATOR-->
\t
\t <section id="contact"></section>
\t <!--CONTACT SEPARATOR-->
\t <div class="sep contact" data-stellar-background-ratio="0.5"></div>
\t
\t <div id="contactwrap">
\t \t <div class="container">
\t \t \t <div class="row">
\t \t \t \t <div class="col-lg-6">
\t \t \t \t \t <p>GET IN CONTACT</p>
\t \t \t \t \t <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> \t \t \t
\t \t \t \t \t \t <p><small><a href="http://www.google.com/">Twitter</a><br/>
\t \t \t \t \t \t <a href="http://www.google.com/">Facebook</a></small></p> \t \t \t \t
\t \t \t \t </div>
\t \t \t \t
\t \t \t \t <div class="col-lg-6">
\t \t \t \t \t <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">
\t \t \t \t \t <div class="form-group"></div>
\t \t \t \t \t <label for="mce-NAME">Your Name</label>
\t \t \t \t \t \t <input class="form-control" name="NAME" type="text" id="mce-NAME" placeholder="Enter Name" data-validate="validate(required, email)" required="required">
\t \t \t \t \t <label for="mce-EMAIL">Email Address</label>
\t \t \t \t \t \t <input class="form-control" name="EMAIL" type="email" id="mce-EMAIL" placeholder="Enter Email" data-validate="validate(required, email)" required="required">
\t \t \t \t \t <label for="mce-MMERGE3">Message</label>
\t \t \t \t \t <textarea class="form-control" rows="3" name="MMERGE3" id="mce-MMERGE3"></textarea>
\t \t \t \t \t <br>
\t \t \t \t \t <button type="submit" class="btn btn-default">Submit</button>
\t \t \t \t \t </form>
\t \t \t \t </div>
\t \t \t
\t \t \t </div><!--/row-->
\t \t </div><!--/container-->
\t </div>
\t
<!-- 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>
\t <script src="assets/js/classie.js"></script>
<script src="assets/js/bootstrap.min.js"></script>
<script src="assets/js/smoothscroll.js"></script>
\t <script src="assets/js/jquery.stellar.min.js"></script>
\t <script src="assets/js/fancybox/jquery.fancybox.js"></script>
\t <script src="assets/js/main.js"></script>
\t \t <script>
\t \t $(function(){
\t \t \t $.stellar({
\t \t \t \t horizontalScrolling: false,
\t \t \t \t verticalOffset: 40
\t \t \t });
\t \t });
\t \t </script>
\t \t
\t \t <script type="text/javascript">
$(function() {
// fancybox
jQuery(".fancybox").fancybox();
});
\t </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, если это помогает - честно, я действительно борется с этим так большое спасибо заранее.
Приветствие
Во-первых, это очень трудно для любого, чтобы ответить на этот вопрос, потому что «делает неправильно» не дает понять, как к этому вопросу. Связано ли это с JS? CSS? изображения отсутствуют? Функциональность не срабатывает? Во всяком случае, может возникнуть проблема с JQuery, которая не загружается достаточно быстро, так как все остальные активы работают с '/ assets /'. Добавьте эту строку кода под свое определение JQuery (и, очевидно, загрузите копию JQuery и поместите ее по правильному пути ...) ' ' – Pete