Jumbotron не отображается в Firefox или Safari

Question 1

Я просто хочу начать с того, что я попробовал множество вещей, прежде чем обратиться к написанию этого сообщения. Вы, ребята, моя последняя надежда.

Мой сайт работает в Chrome, но исчезает в Firefox или Safari.

То, что я попробовал:

Добавил скрипт регистрации, затем в queue; В надежде, что мой grid-12.css загружается перед frontstyle.css (grid-12.css содержит код для jumbotron; bootstrap.css просто содержит мой модальный стиль).

Переместил конец моего while/endif; wp_reset_postdata в самый низ моего jumbotron.
Поместил мой jumbotron как встроенный CSS вместо файла стилей (в данный момент); Разделение CSS по какой-то причине не работает.
Поместил jumbotron в front-style.css (основной файл стилей)
Сделал grid-12.css зависимым от front-style.css (в данный момент)
И еще несколько других вещей…

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' );
  }
} // Конец _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(); 
?>

Другие вещи, на которые стоит обратить внимание

Я пытаюсь избежать встроенного CSS.
Кастомный CSS должен загружаться после Bootstrap.css (в данном случае grid-12.css)

Сейчас, в Safari/Firefox, я могу видеть цвет изображения/jumbotron позади моей навигационной панели, но он не растягивается и не занимает то пространство, которое я хочу.

Спасибо, любой совет по этому поводу был бы отличным.

Question 2

Возможно, ваш CSS-код путает другие браузеры. Во-первых, вы используете префиксованные свойства после непредставленных, я бы их поменял местами. Во-вторых, вы используете сокращенное свойство background с значениями в необычном порядке. Я думаю, что есть браузеры, которые ожидают их в определённом порядке.

.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;
}

Question 3

Это потому, что у вас было множество ошибок в вашем header.php.

Три важных момента, на которые стоит обратить внимание:

Вы не должны добавлять <style>-теги внутри цикла, так как это добавит стили несколько раз, если цикл выполняется более одного раза.
Наиболее вероятная причина, почему это сломалось, заключалась в том, что у вас была такая строка:
<i class="fa fa-chevron-down fa-3x"></i></span> (без начального тега span).
Почему это работает в Chrome и не работает в Firefox/Safari, так это то, что различные браузеры прощают разные ошибки (и обрабатывают ошибочный код по-разному).

Попробуйте заменить ваш код в header.php следующим:

    <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>

    <?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">
          <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>
            </a>
          </div>
        </div>
        <?php 
      endwhile; 
    endif; 
    wp_reset_postdata(); 
    ?>

Аааа… Если вы ещё раз правильно отформатируете свой код, когда задаёте вопрос здесь, то будет легче найти решение вашей проблемы, так как вопрос будет проще читать. Это всего лишь одна из тех вещей, вы понимаете. =D … Этот комментарий написан с любовью.

Jumbotron не отображается в Firefox или Safari

Вопрос или проблема

Ответ или решение

Основные аспекты проблемы

Рекомендации по исправлению

Проверка и тестирование

Заключение