IE11で右サイドバーがカラム落ちする現象

親テーマで表示して改善が見られたら子テーマCSSの記載が関係あるとわかります。

※プラグインWP Theme Testを導入して　外観。WP Theme Test。から『Simplicity2』のテーマを選択。
現在の状態を『on』に。表示する権限を『管理者』に設定し変更保存。これでログインした状態で該当ページにアクセスすれば管理者のみ親テーマで表示されます。

それでもサイドバーがおかしければ、スクロール追従領域のウィジェットを外してみる。※プラグインの出力の可能性が凄く高いので。※pptwj-tabs-wrap

それでもダメなら他のプラグインの仕業の可能性が高いです。

jetpack.css
popular　posts　tab　widget　for　jetpack
WordPress　23　related　posts　plugin/static/themes

プラグインのことは分かりませんが、その辺りのプラグインを停止して試す。
その他プラグインの可能性ががないか順に調べる。
サーバー側のキャッシュ機能・ブラウザのキャッシュが残っていればクリアして試す。などでしょうか。

初めての方は必ずお読みください

どれが原因かをしぼる作業となります。

かうたっく様、わいひら様、お忙しいところ貴重なアドバイスをありがとうございます。

早速、WP Theme Testを使用して親テーマを適用してみたところ、IE11でもカラム落ちせずに正常に表示されたので、プラグインではなくCSSカスタマイズの影響である可能性が高いと考えられそうです。またトップページに関してはIE11でもカラム落ちしていないため、そうなると個別記事ページに原因がありそうですが、カラム幅を変更するといった大きなカスタマイズは行っていないので、原因となったカスタマイズが分からない状態です。

以下試したことになりますが、いずれも問題の解決にはつながりませんでした。
・パンくずリスト上に設置されているマイナスマージン付きウィジェットを撤去
・サイドバーウィジェットの装飾をデフォルトに戻す
・メイン部分の枠線を元に戻す
・jetpackのバージョンをダウングレード
・「PCでサイドバーをレスポンシブ表示」をONにする

ただ、今回の問題はシェアが低いIEに限ったものであり、他の主要ブラウザでは同じマイクロソフトのEdgeを含め何ら問題なく表示されていることから、プラグインの影響やコーディングミスではなくIE自体に問題があるような感じもします。なので、例えばIEからのアクセスのみサイドバーを表示しないといった方針でも解決策になるので、そうした方法があれば教えていただけますでしょうか。

jetpackのバージョンをダウングレード

追従型のサイドバーが怪しい気がするんです。jsだかCSSのposition: fixed;あたりかと『思う』んです。

widget pptwj・pptwj-tabs-wrap・tab-links。そこにおいているpopular・comments・latestと言えばわかりますか？
https://ja.wordpress.org/plugins/popular-posts-tab-widget-for-jetpack/

そのプラグインを停止。※止めると大変だと何とも言えませんけど
それを停止してCSSやJSのキャッシュも残らないようキャッシュの削除をして確認してもらえますか。

後でまたゆっくり見てみます。※メモ代わりでスミマセン。

かうたっく様

先ほどPopular Posts Tabbed Widget for Jetpackを削除した上でキャッシュをクリアしてみましたが、それでもカラム落ちしたままでした。また改めて前述のプラグインを使用して親テーマを適用のうえテストを行った結果、追従エリアに設置したウィジェットは正しく表示されていました。

PCページをIEで表示すると追従領域が本文エリアに被ってしまうという問題のため、多少強引ですがIEのみ追従領域を表示させないという方法でも解決できそうです。

なので、親テーマのsidebar.phpより

  <?php if (is_active_sidebar('sidebar-scroll') && !is_mobile() ): ?>
  <!--スクロール追従領域-->
  <div id="sidebar-scroll">
    <?php dynamic_sidebar('sidebar-scroll');?>
  </div>
  <?php endif; ?>

この部分をワードプレスの$is_IE変数を使用してIEのみ表示しないように条件分岐させることは可能でしょうか？

ご確認ありがとうございます。

Popular Posts Tabbed Widget for Jetpackを削除した上でキャッシュをクリアしてみましたが、それでもカラム落ちしたままでした。また改めて前述のプラグインを使用して親テーマを適用のうえテストを行った結果、追従エリアに設置したウィジェットは正しく表示されていました。

プラグインを切って、親テーマの確認したかどうか？とはっきり言わなかった悪かったのですね…

PCページをIEで表示すると追従領域が本文エリアに被ってしまうという問題

プラグインを使用して親テーマ有効でキレイな表示していたら、子テーマ側のカスタマイズ➡CSS、JS、あと考えられるのは親テーマのPHPを子テーマ側に導入して書き加えたものが原因の可能性が高そうです。が、確認や実際試さないと何とも言えません

かなり特定できたので、もう一息です。ちょっと気になってたのでのぞいて見ました

もう１つ＞＜

テーマカスタマイザー原因の可能性が高くなります。

子テーマ側のカスタマイザーの設定が原因の可能性もある。とわいひらさんが言っている通り、それも原因の可能性も。と追記しますね

こんにちは。

子テーマにはjsを追加してなさそうなので、コチラで分かる子テーマのCSSを見てみました。
おかしな記載だと思うのがザッと見て、以下の2つです。

/*
.home #main{
	padding:5px 5px;
}
*/

/*
.category #main{
	background-color:transparent;
	padding:5px 5px;
	border:none;
}
*/

HTMLをみたら、#main領域を囲むhome・categoryのclass指定が存在しないようです。上記のようにコメントアウトして、キャッシュのない状態で確認してもらえますか？

※私のIE環境でうまく確認ができません。

あとは凄く単純作業です。

子テーマのスタイル（CSS）指定がおかしい思うとき、どの指定がおかしいのか原因を特定するシンプルな方法

以下のようにオカシイと思うところをコメントアウト/*ここにスタイル*/して原因を追究すれば親テーマと同じよう、子テーマIE環境でもおかしな表示にならないかと思われます。

※/*これがコメント*/

以下はダメ。

/*
/*メイン部分の枠を消す */
#main {
    border:none;
}
*/

2行目のコメントを1行目/*・6行目*/のようにコメントアウトしない。

#main .entry {	
	/*width:auto;*/
	padding:20px;
	margin-bottom:12px;
}

順番にコメントアウトしてキャッシュのない状況で、表示確認。問題なければ、コメントを外す。

#main .entry {	
	width:auto;
	padding:20px;
	margin-bottom:12px;
}

上記でコメントが外れたら、また更新。次のスタイルをコメント。

/*.blogroll-channel,
.blogroll-channel * {
    width: auto;
    height: auto;
    margin: 0;
    padding: 0;
    border: none;
    text-align: left;
}
.blogroll-channel {
    margin-bottom: 15px;
    padding: 10px;
}

.blogroll-channel .blogroll-list-wrap {
    margin-bottom: 10px;
}

.blogroll-channel .blogroll-list {
    list-style-type: none;
    margin-bottom: 3px;
    font-size: 12px;
    line-height: 1.3;
}

.blogroll-channel .blogroll-list img {
    vertical-align: middle;
}

.blogroll-channel img.blogroll-icon,
.blogroll-channel img.blogroll-favicon {
    margin: 0 5px 0 0;
}

.blogroll-channel img.blogroll-favicon {
	width: 16px;
	height: 16px;
}

.blogroll-channel a.blogroll-link {
}

.blogroll-channel .blogroll-new-entry {
    margin-left: 5px;
    color: red;
}

.blogroll-channel .blogroll-clip,
.blogroll-channel .blogroll-hatebu {
    margin: 0 0 0 5px;
}

.blogroll-channel .blogroll-link-time {
    margin: 0 0 0 3px;
    color: #666;
    font-size: 10px;
}

.blogroll-channel .blogroll-ad-img {
}

.blogroll-channel .blogroll-ad-text {
    display: block;
    margin-top: 5px;
    color: #666;
    font-size: 12px;
}
.blogroll_wrapper { 
		width: 100%; 
		overflow-y:scroll; 
		background-color: #ffffff; 
	} 

.blogroll_innner { 
		width: 50%; 
		height: 300px; 
		float: left; 
	}
*/

問題なければコメントを外す。次のスタイルをコメント。更新

/*
.recent-comments dt {
  display:none;
}
#comments-thread .comment-id {
    display: inline;
}
#appreach-box {
	border: 1px solid #ddd;
	margin: 2em 0;
}
 
#appreach-box p {
	display: none;
}
*/

こんな感じでどの部分が原因か確かめる方法もあります。

かうたっく様、わざわざ確認して頂きありがとうございます。

先ほど、ご指摘して頂いたものを含めて一つ一つスタイルシートに記載したCSSをコメントアウトして確認してみましたが、やはりIEのみカラム落ちする現象は治りませんでした。

そこで、次善策としてわいひら様に教えて頂いたブラウザハックの方法を用いて、スタイルシートに追記してみました。

@media all and (-ms-high-contrast:none){
  *::-ms-backdrop, #sidebar {
    display:none;
  }
}

これを試してみたところ、IEからのアクセスに限りサイドバーが非表示になることが確認できました。結局根本的な理由はよく分かりませんでしたが、ひとまずこれでIEからはサイドバーのカラム崩れによりほぼ閲覧不可能という状況は脱したので、問題は解決できたようです。あとはマイクロソフトがIEのサポートを打ち切ってくれる時を待ちたいと思います。

かうたっく様、わいひら様、長々とお騒がせしましたが、お忙しい中対応して頂きありがとうございました。