Jumbotron没有出现在Firefox或Safari上

首先，我想说，在我写这篇文章之前，我已经尝试了很多事情。你们是我唯一的希望。

我的网站在Chrome上运行，但在Firefox或Safari中消失了。

Things I have tried:

添加注册脚本，然后排队；希望我的网格-12。css在frontstyle之前加载。css（grid-12.css有jumbotron代码；bootstrap.css只有我的模式。）<移动while/endif的结尾；wp\\u reset\\u postdata到my jumbotron的底部

function.php:

function _cc_scripts() {

  wp_register_style(\'grid_12\', get_template_directory_uri() .  \'/inc/css/grid12.css\');
  wp_register_style(\'normalize_css\', get_template_directory_uri() . \'/inc/css/normalize.css\');
  wp_register_style(\'bootstrap_css\', get_template_directory_uri() . \'/inc/css/bootstrap.css\');
  wp_register_style(\'front_css\', get_template_directory_uri() . \'/inc/css/front-style.css\', \'grid_12\');
  wp_register_style( \'main_style\', get_template_directory_uri() . \'/style.css\');
  wp_register_style(\'animate_css\', get_template_directory_uri() . \'/inc/css/animate.css\');
  wp_register_style( \'font-awesome\', \'//maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css\', array(), \'4.6.1\' );
  wp_register_style( \'_cc-style\', get_stylesheet_uri() );
  wp_register_style( \'_cc-skip-link-focus-fix\', get_template_directory_uri() . \'/js/skip-link-focus-fix.js\', array(), \'20151215\', true );

  wp_enqueue_style(\'grid_12\');
  wp_enqueue_style(\'normalize_css\');
  wp_enqueue_style(\'bootstrap_css\');
  wp_enqueue_style(\'front_css\');
  wp_enqueue_style(\'main_style\');
  wp_enqueue_style(\'animate_css\');
  wp_enqueue_style(\'font-awesome\');
  wp_enqueue_style(\'_cc-style\');
  wp_enqueue_style(\'_cc-skip-link-focus-fix\');


  if ( is_singular() && comments_open() && get_option( \'thread_comments\' ) ) {
    wp_enqueue_script( \'comment-reply\' );
  }
} // End of _cc_scripts()
add_action( \'wp_enqueue_scripts\', \'_cc_scripts\' );

header.php:

<?php
$args = array(
\'category_name\' => \'jumbotron\',
);
$the_query = new WP_Query( $args );
?>

<?php 
if ( have_posts() ): 
  while ( $the_query->have_posts() ):   
    $the_query->the_post(); ?>

    <?php
    $thumbnail_jumbo  = get_post_thumbnail_id($post->ID);
    $featuredImage = wp_get_attachment_image_src( $thumbnail_jumbo , \'full\');
    $thumbnail_jumbo = $featuredImage[0];
    list($width, $height) = getimagesize($thumbnail_jumbo); 
    ?>

    <div class="jumbotron">
      <style type="text/css">
        .jumbotron {
      background: no-repeat center right fixed  url(\'<?php echo $thumbnail_jumbo ?>\');
     padding:0;
     margin-bottom: 0px;
     max-width:100%;
     min-height: 500px;

     background-size: 100%;
     box-shadow:0px 0px 10px #000;
       -webkit-background-size: 100%;
         -moz-background-size: 100%;
           -o-background-size: 100%;
     background-size: cover;
       -webkit-background-size: cover;
         -moz-background-size: cover;
           -o-background-size: cover;

        }
        </style>


        <div class="scroll-down text-center  hidden-sm hidden-md hidden-lg">
        <a href="#" class="about"><span class="icon-down">
          <i class="fa  fa-chevron-down fa-3x"></i></span>
        </a>
      </div>
    </div>
    <?php 
  endwhile; 
endif; 
wp_reset_postdata(); 
?>

Other things to note

<我正在努力避免内联CSS现在，在Safari/Firefox上，我可以看到导航栏后面图片的颜色/jumbotron，但它不会拉伸并占用我想要的空间。

谢谢你的建议，这将是伟大的。

.jumbotron { background: url(\'<?php echo $thumbnail_jumbo ?>\') right center no-repeat fixed; padding:0; margin-bottom: 0px; max-width:100%; min-height: 500px; box-shadow:0px 0px 10px #000; -webkit-background-size: 100%; -moz-background-size: 100%; -o-background-size: 100%; background-size: 100%; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; }

相关推荐