こんにちは、
フロートによる親ブロックの突き抜けですね。
試していませんが、
正常に表示できるものと出来ないものの構造的な違いは、
フッタが異常なもの
</div><!-- .entry-content -->
</article><!-- #post -->
</div><!-- #content -->
</div><!-- #primary -->
正常なもの
</article><!-- #post -->
<div id="comments" class="comments-area">
</div><!-- #comments .comments-area -->
</div><!-- #content -->
</div><!-- #primary -->
なので、page-template/full-width-php( 固定ページでトップページ表示ですよね )を開いて、<div id="comments" class="comments-area"></div>（多分クラスやIDは関係ないです）を追加してみてどうですか？
IE6への対応は、htmlだけでなく、jQuery等でも動作に支障が出ると思いますので、注意してください
nobita様
早速のご回答ありがとうございます。
ご提案いただいた通り<div id=”comments” class=”comments-area”></div>を追加してみましたが改善しませんでした。
オリジナルのpage-template/full-width-phpに戻して再度検証したところ、ulリストをテンプレートに追加しても固定ページに追加しても表示が崩れました。
固定ページにテキストや画像だけであれば表示は崩れません。
結果としてはfloatさせているulリストを表示させるとIE6で崩れるようです。
実際使用しているコードは以下です。
↓テンプレートに記載
<ul class="example">
<?php query_posts('showposts=10');
if (have_posts()) : while (have_posts()) : the_post(); ?>
<li><a>">
<?php the_post_thumbnail(array(230,230)); ?>
<?php the_title(); ?></a>
</li>
<?php endwhile; endif; wp_reset_query(); ?>
↓CSS
ul.example{
overflow: hidden;
margin:50px 0 0 0;
}
* html ul.example{
position: absolute;
margin: 0 -1px 0 -1px/*IE6バグ対策*/
}
*:first-child+html ul.example{
margin: 0 -1px 0 -1px/*IE7バグ対策*/
}
.example li {
list-style-type: none;
float: left;
position:relative;
margin:0 30px 70px 0;
width: 230px;
}
.example a {
text-align: center;
display: block;
text-decoration: none;
width: 230px;
}
CSSに問題があるのでしょうか・・・
追記です。
exampleというクラスを外すと改善しました。
floatのやり方がまずいのでしょうか・・・
私的には、
アスタリスクハックなどを使うより、
<!--[if IE 6 ]>
<p>この表示はIE6だけで見えます。</p>
<![endif]-->
http://allabout.co.jp/gm/gc/23921/2/
をつかって処理したほうがいいと思います。
nobita様
いつもありがとうございます。
教えていただいたサイトを確認し、IE6だけ違うCSSを作ろうかと思いましたが、
よく見るとTwentytwelveでもIE用のCSSを読み込んでいることに気づきました！
なるほど、これでいくらstyle.cssを変更しても反映されなかった理由がわかりました！
で、いろいろ試してみましたがやはりfooterが浮いてしまうので、オリジナルのTwentytwelveで何も変更していない状態で確認したところ、デフォルト状態でもIE6でfooterが上部に浮いていました。
私が実装した解決策としては、TwentytwelveはHTML5のie対策はされているようですが、
実際に反映されてないようなので、ie.cssに#colophonに対するコードを追記しました。
/* Footer */
#colophon {
border-top: 1px solid #ededed;
clear: both;
font-size: 12px;
line-height: 2;
width: 960px;
margin-top: 24px;
margin-left: auto;
margin-right: auto;
padding: 24px 0;
text-align:center;
}
#colophon a {
color: #686868;
}
#colophon a:hover {
color: #21759b;
}
今回いただいた回答で、いろいろなことに気づくことができました。
nobita様、ありがとうございました。
これからも勉強していきたいと思います。
今後ともどうぞよろしくお願い致します。
