Question

我已经编写了一个HTML / CSS网站，我已经从我给出的CSS模板网站进行了修改。

我已经针对Chrome，Opera，Safari进行了检查，它运行正常。

问题在于，当涉及到Firefox时，它只显示徽标和一些非常基本的导航内容。

我希望有更多网络编程经验的人可以看看，让我知道可能出现的问题。

我不想问这样一个普遍的问题，但我真的不知道发生了什么。您可以在此处找到该网站：matroscoe.ca。

提前感谢您的帮助或指示！

<?php require('./blog/wp-blog-header.php'); ?>
<!DOCTYPE html>

<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]-->
<!--[if IE 7]>    <html class="no-js lt-ie9 lt-ie8" lang="en"> <![endif]-->
<!--[if IE 8]>    <html class="no-js lt-ie9" lang="en"> <![endif]-->
<!--[if gt IE 8]> <html class="no-js" lang="en" id="index"> <![endif]-->

<head>
    <!-- Analytics -->
    <?php include_once( "php/analytics.php" ); ?>

    <base href="http://matroscoe.ca" /> 
    <title>Home \\ Mat Roscoe</title>

    <!-- SEO Information -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width">
    <meta name="description" content="This website provides current information on the research and work of Matthew Roscoe">
    <meta name="author" content="Matthew Roscoe, Graduate Student, http://matroscoe.ca">

    <!-- Favicon -->
    <link rel="shortcut icon" type="image/x-icon" href="favicon.ico">
    <link rel="shortcut icon" type="image/png" href="favicon.png">

    <!-- CSS Style Sheets -->
    <link href='http://fonts.googleapis.com/css?family=Open+Sans:400italic,400,700' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" href="css/style.css">

    <!--[if lt IE 9]>
    <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
</head>

<body>
<!-- Prompt IE 7 users to install Chrome Frame -->
<!--[if lt IE 8]><p class=chromeframe>Your browser is <em>ancient!</em> <a href="http://browsehappy.com/">Upgrade to a different browser</a> or <a href="http://www.google.com/chromeframe/?redirect=true">install Google Chrome Frame</a> to experience this site.</p><![endif]-->

<div class="container">
    <script src="js/header.js" onload="header();"></script>

    <div class="home-page main">
       <section class="grid-wrap" >
          <header class="grid col-full">
            <hr>
            <p class="fleft">Home</p>
            <a href="about.php" class="arrow fright">more info</a>
        </header>

        <div class="grid col-one-half mq2-col-full">
            <h1>
                Robotics <br>
                A.I. <br>
                Computer Vision <br>
                Space Exploration
            </h1>

            <p align="justify">
                 I am a graduate student studying <a href="http://en.wikipedia.org/wiki/3D_computer_vision">3D Vision Systems</a>
                 and <a href="http://en.wikipedia.org/wiki/Artificial_intelligence">Artificial Intelligence</a> in robotic platforms. 
                 My goal is to work in space exploration robotics in the near future. 
            </p>
            <p align="justify">
                My current interests are focused around 3D object representation that has been afforded to us thanks to new RGB-D sensors. I am also investigating ways to learn about objects on the fly. 
                You can learn more about the project I am working on either through my <a href="#">Publications Page</a> or through my <a href="#"> Projects Page </a>. 
            </p>
        </div>


        <div class="slider grid col-one-half mq2-col-full">
            <div class="flexslider">
                <div class="slides">
                  <?php
                    global $post;
                    $args = array( 'posts_per_page' => 5 );
                    $myposts = get_posts( $args );
                    foreach( $myposts as $post ) :  setup_postdata($post); ?>
                    <div class="slide">
                        <figure>
                            <?php $args = array(
                               'post_type' => 'attachment',
                               'numberposts' => -1,
                               'post_status' => null,
                               'post_parent' => $post->ID
                              );

                              $attachments = get_posts( $args );
                                 if ( $attachments ) 
                                 {
                                       //echo wp_get_attachment_image( $attachment->ID, 'full' );
                                       $image_attributes = wp_get_attachment_image_src( $attachments[1]->ID, 'full' ); ?>
                                       <img class="front" src="<?php echo $image_attributes[0]; ?>" width="400px" height="370px">
                                 <?php } ?>
                            <figcaption> 
                            <div>
                                <h5><?php the_title(); ?></h5>
                                <?php the_excerpt(); ?>
                                <p class="readmore"><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title(); ?>">Continue Reading &raquo;</a></p>              </div>
                             </figcaption>
                        </figure>
                    </div>
                    <?php endforeach; ?>
                </div>
            </div>
        </div>
    </section>
</div> <!--main-->
    <?php include("php/footer.php"); ?>
</div>

<!-- Javascript - jQuery -->
<script src="http://code.jquery.com/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/jquery-1.7.2.min.js"><\/script>')</script>

<!--[if (gte IE 6)&(lte IE 8)]>
<script src="js/selectivizr.js"></script>
<![endif]-->

<script src="js/jquery.flexslider-min.js"></script>
<script src="js/scripts.js"></script>

<script type="text/javascript">
var clicky_site_ids = clicky_site_ids || [];
clicky_site_ids.push(100591972);
(function() {
  var s = document.createElement('script');
  s.type = 'text/javascript';
  s.async = true;
  s.src = '//static.getclicky.com/js';
  ( document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0] ).appendChild( s );
})();
</script>
<noscript><p><img alt="Clicky" width="1" height="1" src="//in.getclicky.com/100591972ns.gif" /></p></noscript>
</body>
</html>

Answer 1

我认为问题在于您输出<html>标记的条件注释。首先，他们似乎只针对Internet Explorer，我认为没有为普通浏览器输出<html>标签的情况。其次，最终的条件评论似乎有缺陷：

<!--[if gt IE 8]><!--> <html class="no-js" lang="en" id="index"> <!--<![endif]-->

应该是

<!--[if gt IE 8]> <html class="no-js" lang="en" id="index"> <![endif]-->

那就是说，我不确定为什么它在使用例如Chrome。我想这很可能是因为Chrome对破坏的条件评论做出了不同的反应并在其中应用了<html>标签，而Firefox却没有。

另外，尝试添加最终的条件评论，如下所示：

<!--[if !IE]><html><![endif]-->

定位非IE浏览器并查看是否有帮助。

Answer 2

你检查错误控制台了吗？（Ctrl + Shift + J） - 工具Web开发人员错误控制台。我在那里看到一堆物品。

Answer 3

我发现我的网站存在问题。问题是我使用Javascript来创建导航菜单，我把它绑定到onload（）的错误调用，即使从未实际发生过。一旦我将Javascript改为更简洁的PHP版本，问题就消失了，我在使用Firefox浏览网站时没有任何问题。

我想将答案与其他人分开发布，因为它不同，但如果不是每个人都为我查看我的代码并提出建议，我甚至都不会发现错误。感谢大家帮助我在其他浏览器上运行！

垫

网站无法与Mozilla Firefox一起显示

3 个答案: