chrome以外のブラウザで意図通りの表示結果が得られない問題を解決したい。

###前提・実現したいこと
chrome以外のブラウザで意図通りの表示結果が得られない問題を解決したい。

###発生している問題・エラーメッセージ
IEでの問題
・PCでの表示がスマートフォンのメディアクリエのCSSが適応される。
ブラウザのウインドウサイズを動かすと直る。

IEとFirefoxでの問題
・コンテンツごとにhtmlを別けてajaxで呼び出す作りにしていて、jqueryのスライダーをajaxで呼び出したheader.htmlを、index.htmlでajaxをつかって呼び出すと、jqueryが効かずに画像がただ並んでる状態で表示される

header.html単体では問題が起こらないので、index.htmlかstyle.cssに何か問題があるのか
お手上げ状態です。

###index.html


<meta name="viewport" content="width=device-width,initial-scale=1">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>

<!--スライダー-->
<script type="text/javascript" src="js/slick/slick.js"></script>
<link rel="stylesheet" href="js/slick/slick.css" type="text/css">
<link rel="stylesheet" href="js/slick/slick-theme.css" type="text/css">    

<!--共通と初期化スタイル-->
<link rel="stylesheet" type="text/css" href="css/style.css">

<!--ajax-->
<script type="text/javascript">
function header() {
    $.ajax({
         url: 'header.html',
        dataType: 'html',
        success: function(data) {
            $('#header').html(data);
        },
        error: function(data) {
            $('#header').html(data);
        }
    });
}
</script>
    
</head>
<body>
<div id="container">

    <!--ヘッダー読み込み-->
    <script type="text/javascript">header();</script>
    <div id="header"></div>

他のコンテンツ省略

</div>
</body>
</html>

###style.css

@charset "utf-8";

@media screen and (min-width: 1000px) {
省略
}

@media screen and (min-width: 769px) and (max-width: 999px) {
省略
}

@media screen and (max-width: 768px) {
省略
}

chromeでは問題なく意図通りに表示出来ており、入れ子の{}閉じ忘れや初歩的なミスがないかは何度もチェックしたがない様子です。

CSS、Javascript、メディアクリエの読み込み順を変えました結果。
リロードのタイミングによっては、Javascriptは動作するようです。

IEでアクセス時、メディアクリエが無視されて　スマホのSCCがかかる箇所が2箇所ほど出てきます。

追記
CSSのメディアクリエが一部スマホ用になる症状の解決
スマホ用のメディアクリエで書いたプロパティをPC用でPC用に直すことで解決しました。自分の不注意でした。
ajaxで呼び出した部分のjavascriptが効かない点は、引き続き回答募集します。

行動規範の内容に同意します

回答1件

<script type="text/javascript">header();</script> <div id="header"></div>

id=headerdivの前にheader()を実行していますが
header()内で#headerを参照しているので順番が逆では？
jQueryを前提としたソースですしheader()という名称のユーザー関数を
再利用しないならロード時の処理に入れ込んでしまう方がよいのでは？

javascript
1
2$(function(){
3  $.ajax({
4  url: 'header.html',
5  dataType: 'html',
6  }).done(function(data){
7    $('#header').html(data);
8  }).fail(function(xhr,err){
9    $('#header').html(err);
10  });
11});
12
13