IEで見たときのレイアウト崩れについて

再送です。
IEレイアウト

再々送です。

IEレイアウト

IEのoverflow バグではなかろうかと思います。
サイトを見てないのでわかりませんし、うちの環境はlinuxなのでIEは端から動作しないので確認もできませんが、「position: relativeを指定した子要素の親にoverflow: hiddenがある場合に、非表示しているのに中身がはみ出す」というような現象だったかと。
ただしこれは構造的にSimplicityには当てはまりません。親要素にはposition: relativeがありますので。

問題はIEはこれ以外にもいくつもバグがあるということです。

昔、個人的に僕に同じようなことを聞かれた人がいましたが、「IEなので」と答えたら「なるほど」と即答でした。IEの対応してたらいつまでもIEを使う人がいなくならないので、いつまでも対応しないといけないようになります。

代替のブラウザが有償なのであればサポートも必要でしょうが、firefoxやchromeはタダなんですからM$のサポートが終わった古いIEはもう良いですが、IE11やedgeに対して文句があるならM$を動かしてW3C準拠のブラウザを出せと運動をすること以外手はありません。

今回の問題は、cssでoverflow:visibleが問題かも知れません。

#main .entry {
    width: 214px;
    margin: 10px 5px 0 5px;
    border: 1px solid #ddd;
    border-radius: 5px;
    float: left;
    clear: none;
    overflow: visible;
}

これはインラインで出力されているっぽいので、子テーマに、

#main .entry {
  overflow: hidden !important;
}

みたいにしてみるかでしょうか。ただし、

Internet Explorerでは、内容がはみ出すのではなく、ボックスの方が内容に合わせて拡張されます。

overflow: visibleはこのように説明されているので、ここが問題ではない場合も多分にあります。ひとまずの1例として。

また、もしデフォルトでそのような状態であればわいひらさんも気がつくと思うので、コメント欄の上あるいは初めての方は必ずお読みくださいにもあるように問題が出てるページのアドレスを公開して下さい。
幅が広くなっている箇所は他と比べてどのような違いがあるか、などを調べる必要があります。
何が原因でそうなっているかがわからないと原因を絞り込めないと思います。

サイト開発中でアドレスが公開できない場合は、最低スクリーンショットが必要ですが、そこからでは原因がつかめないだろうと思います。それでも手がかりが全く無いよりは何かしらが見つかる可能性が無きにしもあらずです。

その他の原因の一つとして、タイル2列にしているmasonryというスクリプト自体をIEが正しく処理できないのかも知れません。ここらは念の為利用されているSimplicityとwordpressのバージョンが必要になるかと思います。IEのバージョンも然りです。

またIEで見た時、他のテーマやサイトでタイル2列表示ができるサイトがあれば、そこを参考までに書いてもらうとよいかも知れません。

Hidekichi 様

ご連絡ありがとうございました。

いただいた点を変更してみましたが、変化無しでした。

サイト公開した際には、再度ご連絡させていただきますので、
そのときはまたよろしくお願いします。

ikedaさん
念のためですがキャッシュは削除されましたか?

みき　さん

ご連絡ありがとうございます。

キャッシュの削除はしております。
しかし、状況は変わらずです。
数台のPCで確認しましたが、IEでのレイアウトのみ崩れます。

サイト公開しました。

http://hatagaya-base.com

こちらのカテゴリー一覧ページのIEでのレイアウト崩れの原因がわかりません。

アドバイスを宜しくお願いします。

こういったカード型、あるいはグリッドでやる場合はMasonryを使わずcssだけでデフォルトのリストをスタイルして下さい。

masonryはタイルのように並べるためのもので、カスタマイザーでは「タイル〜」と言うように書いてあると思いますが、本来高さの違う要素を隙間なく並べるためのものです。

サンプル: デフォルトのリストを質問のサイトのように見せる | codepen
※ cssはscssで書いてあります。css欄のview compiledわりcssに変換できます。

IEでも見るということなので、flex等は使わずfloatで書いてあります。画像部分でtransformを利用してますので何かしらあればここが問題になるかも知れません。

masonryでは、位置をjsで計算して決めてしまうのですが、cssではそれらができません。質問のサイトのようにレイアウトすると1つのアイテム幅が小さくて右にデッドスペースが36px程度(記憶が曖昧ですが)できるので、リストアイテム自体を質問サイトより大きくしてあります。

またbox-sizing: border-boxを使わない環境下ではpaddingによるスタイルはうまくサイズを設定できない場合があるのでmarginに変えました。
一部、質問のサイトと同じように見せるためjQueryを利用していますが、これは見せかけだけのものなので必要ありません。

#body-inのサイズがデフォルトと違うため、レスポンシブには対応させてありませんが、本来であればリストアイテムのサイズなどはcalcで計算することも可能です。
むしろそうするべきですがなんせ相手がIEなので、変に自動的なスタイルをするとおかしくなる可能性が大のため使っていません。calcはIE11なら動作するはずですが敢えて未使用です。

メディアクエリをガチガチに書いてその都度アイテム幅をpxで書くか、%やem等の相対的な単位でやればまぁなんとかなるかと思います。

今回の質問の原因としては、masonryで自動で計算させるようなスクリプトを使用しているのに(位置が絶対位置に固定される)、cssでスタイルしている所に問題が出ているのではなかろうかと。
つまり、隙間が出る部分は、本来スクリプトがアイテムを挿入するはずの位置ではなくなってしまっているためスペースができてしまうのではなかろうかと想像します。もしくはcssのfloatによってズレてしまっているのかもしれません。ウチはIEがないので正確にはわかりませんけどね。

余程の理由がない限り、こういったスクリプトを使うよりは、原始的な方法でスタイルするほうが問題は少ないです。

まぁIEを未だに使い続けるのは日本と韓国・中国ぐらいなので、商売でサイトを作る場合はしょうがないですが、基本的にはIEは切り捨てたスタイルでサイトを構築して、サイトにアクセスした人がIEを使っている場合はIE用のスタイルを別途読み込むというのが得策です。

メインのスタイルをIEにあわせると、サイトの構築に別労力が必要になり結果的に不経済です。別途作るべきIEなんかのスタイルは20年ぐらい前のスタイルで書いとけば良いかと思います(笑)
逆にそれら原始的な方法で今時の様に見せるのは腕が必要です。画像を多用したりtableでレイアウトしたり。ただこうするとSEO的な問題が出てGoogleからは嫌われます。なのでIE用の奇特な人に向けてのスタイルシートが別途必要になるということです。

会社などからikedaさんのサイトを見られた方は、何かしらの理由でIEでしか見れないかも知れませんが家ではchromeなどで見てると思うんですよ。その時に表示(レイアウト)に違いがあると示すことが重要です。

最近ではスマホで見る人が多いので、特にIEに力を割く必要性は薄いです。
スマホにはIEがありませんから。
むりくりIEを使うこともできるみたいですけどね。まぁそういうのは毎日のご飯を飯ごうで炊いてるような人と同じようなもんです。圧倒的なマイノリティです。

このようにしていれば、どう考えても便利に使える方に人は変わりますから、IEは仕事用と割る切る人が出てくるはずです。本来はバッサリ切り捨てるのが一番良いですが、商売ならしょうがない部分がありますのでそこらは別コストをかける必要がどうしても出てきます。
軽自動車に追加メーターを付けるぐらい余計な出費ですけどね(笑)

フルページビューでIEにて確認して下さい。

画像部分が崩れるようならまた何かしら考えます。

わいひら　さま

親テーマを適用させても、同様の不具合が出ます。
IEは「11」ですので、バージョンは問題ないのかなと思います。

Hidekichi　さま

私には随分と専門的すぎて、難しい内容でした･･･
ただ、いただいたリンクを「IE11の環境でフルページビュー」で見たところ、
二列にならずに一列表示になりました。

フルページビュー

やはりご指摘どおり、IEは気にせずに･･･が一番いいのでしょうか？

もしかするとIEではボーダーあたりの計算もややこしいことになっているのかも知れません。
2px分アイテム幅を縮めました。

デフォルトのリストではアイテムのfloatを解除するために、

#main .entry {
  clear: both;
}

というのが入ってるのですが、これを解除するためにinitialを入れたのが問題なのかも知れませんのでnoneに変更しました。
モダンブラウザというのはわからない値が入ってると無視するんですがIEはそれがではないのかなんなのかで元のスタイルが反映されているのだろうと思います。

どちらに問題があるのかはわかりませんが、これでイケるんじゃなかろうかと。もしclearの方が問題であれば、幅は2px程度戻しても収まるはずです。ここらは調整して下さい。

前リンクのフルページビューで再度確認していただければと思います。

> IEは気にせずに･･･

IEは気にせずと言うよりは、メインは今時のスタイルをしておき、ページ読み込み時にIEかどうかを判断してIEの場合は専用のcssを読み込ませるのが良いかと思います。

スクリプトで判断しても良いですが、

＜link rel="stylesheet" type="text/css" href="style.css">
＜!--[if IE ]>
＜link rel="stylesheet" type="text/css" href="/css/ie/style.css">
＜![endif]-->

※ 投稿エラーが出るので先頭の＜を全角で書いてます。正しくは半角＜です。

こんな風に書きます。こういうのをコンディショナルコメントと言います。
こういう書き方をした場合、モダンブラウザは前者を、IEは後者を読み込みます。子テーマのheader-insert.phpあたりにでも書いておけばよいのではなかろうかと。本来はブラウザのユーザーエージェントからIEを判別して、wordpressのwp_enqueue_style()という関数で読み込むcssを変更(あるいは追加)します。
これらは色々方法があるかと思うので何が正解かはわかりませんけどね。

専用cssを用意する場合、サイトを今時のスタイルで書いておき、それをIEで開いた時に何(あるいは、どこ)が問題なのかを確認しておき、その部分をfixさせるスタイルを専用のCSSに書くという具合です。

まぁ古いプロパティで同じように表示するのは大変だと思いますよ。ただできなくはないです。昔はしていたわけですから。IEの場合、想定外のことが起こるからやっかいなんです。なんせMSの独自仕様でW3Cには沿って作られていないので。
edgeもそんな感じですがまだマシです。まだ新しい分、実装できていないものもあるだけ…と信じたいものですが。

IEのせいでどれだけ多くのコーダーが終電に間に合わず家に帰れなかったことか(笑)
あのバグが取れない…と呪文を繰り返す人もいましたし、MSが古いIEのサポートを打ち切った時、もろでを上げて歓喜した人もいました。祝杯をあげた人もいるとか(笑)
そういうものなんです。IEとかは。

Hidekichi　さま

詳しいご説明、ありがとうございます！
専門的な用語はまったくわかりませんので、
指示どおり

#main .entry {
clear: none;
}
を入れましたが、現状かわらず。

幅を縮めたりもしましたが、かわらずです。
ちなみに、調整する幅の箇所は
#main .entry で合ってますか？
#main　の方も調整しましたが、かわらずでした。

いただいたリンク先のフルページビューは、
きちんとレイアウトも反映されていて、さすがだなと思いました！

> 現状かわらず

ブラウザのキャッシュが残っているのではなかろうかと。

別件で。
画像部分に何かしらプラグインかスクリプトが動作してますよね？
これが一番の原因かも知れません。サンプルのように、デフォルトのリスト表示をcssで2列にするだけならMasonryも正しく動作するとは思うんですが、レイアウト決定後、この画像関係の何かしらがサイズを変更するのでレイアウト崩れが起こるのではなかろうかと。

正しい順番。
・css読み込み、html出力
・Masonryでレイアウト

現在の順番
・css読み込み、html出力
・Masonryでレイアウト
・画像の何かしらがサイズ変更など ←ここが問題かと。

修正するなら、
・css読み込み、html出力
・画像の何かしらがサイズ変更など
・Masonryでレイアウト

タイル2列を使うとしたらこうなるようにしないといけません。

このサイズ変更等で、本来#listのブロック内の.entry(リストアイテム)の位置がなにやらおかしなことになるというのが、それっぽい原因に思うんです。

仮に、デフォルトのリスト表示のcssをサンプルのようにして画像部分は他のスクリプトなりが無しならIE10でも正しく表示できると思います。同じくしてサンプルの画像部分のスタイルはなくして、スクリプトの何かしらでやった場合、おそらくは正しく動作すると思いますが表示までに何かしらチラツキと言うかサイズを変更している様子が一瞬表示されるかも知れません。

わいひらさんが親テーマだけで状態を確認して欲しいというのは、カスタマイズに問題があるか、プラグインにあるのかテーマ側にあるのかを絞り込むためです。
わいひらさんはIEの環境があるので親テーマの確認はしてると思います。しかしいろんな利用環境があって確かめきれていない可能性があるため、どういう時にどうなるかという再現できる情報が必要なわけです。
テーマ側に問題があって再現できるなら修正はしてくれるだろうと思いますが、カスタマイズやプラグインの問題なら自力でなんとかする必要があります。

念の為書いておきますが、サンプルはscssで書いてありますのでcss欄のview compiledでcssに変換したものを子テーマstyle.cssに追記します。
リスト表示は、カスタマイザーからデフォルトを選びます。別途何かしらの手が加わっていない状態(プラグインの影響がないとか)なら、それだけで現在と同じような表示になるはずです。またMasonryを使いませんから、プラグインで画像の読み込みなどをした場合、サンプルのcss内の

#list .entry .thumb {}
#list .entry .thumb img {}

あたりをコメントアウトするなどすれば、プラグイン(スクリプト)の方のcssなりが動作するだろうと思います。それで正しく表示されるかはわかりませんが。あくまでサンプルはデフォルト表示が基準です。

Hidekichi　さま

いつも詳しい説明をありがとうございます。
しかしながら、初心者の私には難しすぎる内容ですので、
このまま進めたいと思います。
（表示されてないわけではないので）

本当にいろいろとありがとうございました。

またよろしくお願いします。

もし別(個人的なwordpressとか、cloud9とかのオンライン開発環境とか)で、wordpressをもう一つ作れるようなら、サンプルのcssをSimplicityのデフォルトで何も手付かずの状態に子テーマを導入して適用して下さい。
※ view compiledはcss欄下向き三角の中にあります。

見た目は質問のサイトと同じになるかと思います(IE10以上。IE9はtransformが正しく動作しないかと)。

ikedaさんと同様に、IEでflexを使うに使えない方で2列表示にしたい方は、一部変更する必要はありますが、サンプルを参考までに。
サンプルはレスポンシブには対応させてませんが、メディアクエリを書けば可能です。

※ IEを無視すればもっと簡単に書けます。

Hidekichi　さま

ありがとうございます。

頑張って勉強します！

またよろしくお願いします。

お世話になっております。

Hidekichiさんに言われたとおり、IEを意識せずにサイト作成を進めていました。
本日久々にIEで見たところ、きちんと配列されていて、問題なく表示されていました。

テーマのバージョンアップによるものなのでしょうか。

これで希望通りのレイアウトになりました。
いろいろとアドバイスをいただき、助かりました。
ありがとうございました。
今後ともよろしくお願いします。

こういったカード型、あるいはグリッドをSimplicityでは
cssだけでスタイルせずに、Masonryを使われたのでしょうか？

firefox, chromeに限定するならcssのgridが便利です。

サンプル: トップリスト一覧 gridレイアウト カードタイプ2|3列 レスポンシブ | codepen

サンプル: grid layout | codepen

2つ目は、body-inの中身、sidebar 新着・人気、.blog-card、関連記事、.footer-widget、シェアボタン。メニューの英数字が上にズレるのをfixを実装したサンプルです。