CSSテクニックコミュのMacIEでのギロチンバグ？

MacIEでのCSS検証で、コンテンツが重なってしまうという問題が起きています。
clearfix指定をあてたり、場所によっては高さを指定してみたりしているのですが、
どうも決め手となる解決法が見当たりません。

画像左：
左が重なり合っている様子（MacIE）。
画像右：
その他のブラウザでの正しい表示の様子。

とくに重なりあっている部分（背景紫でわけている）のソースはこんな感じです。

<div id="content"><div id="content_border">

<h1>h1タイトル</h1>

<div class="section">
<h2>h2タイトル</h2>
<p>本文本文…</p>
</div>

<div class="section">
<h2>h2タイトル</h2>
<p>本文本文…</p>
</div>

<div class="section">
<h2>h2タイトル</h2>
<p>本文本文…</p>
</div>

</div></div>

#content {
float: right;
width: 608px;
padding-bottom: 0px;
}

#content_border {
text-align: center;
border-left: 1px solid #000000;
margin-bottom: 0px;
}

.section{
width: 558px;}

h1{
border-bottom: 1px solid #000000;
padding-bottom: 0px;
height: 53px;
text-indent: -9999px;
margin-right: 0px;}

h2{
margin-bottom: 13px;
height: 18px;
color: #333333;
padding-top: 2px;}

/*Clearfixを使う場合…class指定する*/
.clearfix:after {
content:".";
display:block;
height:0;
clear:both;
visibility:hidden;
line-height: 0;
}

.clearfix {
display:inline-block;
}

/*hide mac ie\*/
* html .clearfix {
height:1%;
}
.clearfix {
display: block;
}
/*end hide mac ie*/

重なり合いは、div.sectionの頭に出てくるh2のようなブロック要素では重なりませんが、その後に出てくる画像などには重なるようです。
また、div#content,div#content_borderも子要素であるdiv.sectionの高さを無視し、たとえclearfixクラスを足しても解決しません。

どうぞよろしくお願いいたします。

コメント(10)

最初
全て
最新の40件

[2] mixiユーザー 05月12日 09:29

ソースざっと読みなので、まちがってたら、申し訳ないですが。floatによる影響のバグでclearfixを使うのではなく、

http://www.fsiki.com/archive/css-doc/float.html

のソース使ってみてはどうですか？参考までに。

[3] mixiユーザー 05月12日 23:06

1: たくぼーさん、 2: sakanaさん
お返事ありがとうございました。
結果としてはどちらも反応無しでした…

現在、あまりにもMacIEでの挙動がダメなので、該当CSSだけブラウザ振り分けをして直しています。
sakanaさんのURL先の記事も実は読んでいて、先ほど改めて検証してみたんですが、
overflow：visibleが全く反応無しです。
また、上記のソースではMacieに対応させるclearfixがinlibe-blockになっていたのでこちらもinline-tableにしましたが同じ。

そして、内部divの.sectionに試しにheightを与えてみても、これが一番ナゾなのですが反応なしなのです。
重複指定もなさそうだしまだ悩む必要があるようです…

[4] mixiユーザー 05月12日 23:43

と言うかなぜ今更MacIE?
開発もサポートもとっくに終了しているので、どうしてもMacIEで動作保障しなければいけない理由が無ければ潔く切り捨てるってのも手かと思いますよ？

[5] mixiユーザー 05月12日 23:45

CSSの中に日本語があると、その周辺のスタイルが読み込まれなくなるとか言うことがMac IEだと稀にあります。/*Clearfixを使う場合…class指定する*/と書いてあったので。多分違うとは思いますが・・・

それかHTMLとCSSファイルの文字コードが違ってたりとか。

ちなみに

/* avoid MacIE4.5 & MacIE5.x */
/* \*/
@import url("hogehoge.css");
/* */

とやれば、この間のimportはMacIEに無視されるので、MacIEは全てCSS非適応にしてあきらめるという選択肢もあります・・・。

[7] mixiユーザー 05月13日 00:33

申し遅れましたが、これらは互換モードで制作してます。
それでボーダー用div等を使っています。

4: YSKさん
6: 《darkdaft》ver.1さんのおっしゃるとおり、IE5から適用する仕様なのです。
実際MacIE5で観てるユーザーも数は少ないながらいます。
この人たちを切り捨てるのは営業上大問題なんですよね…

5: Takazudoさん
日本語は使ってないのです。上のはここに書き込む用。
昔Shift-jisをEUCに変更する必要があって行ったとき、
本泣きの目にあったものでcssには日本語を使わない癖がついてしまいました。

ブラウザ振りわけ、そのバックスラッシュハックでやってます。
そうですね、非適応にしちゃうという最終手段もありですね…
それにしても非適応にする範囲を検証する必要があるんですが。

他の指定をひとつひとつオフにしても問題が全く解決しません。やはり内部の.section部分が問題ではあります。
これに高ささえ指定できれば、ともかくもごまかせるんですが、
上記の通り.sectionに高さをつけても反映されない。
html内で<div class="section" style="height:200px;">のように高さ指定すれば出るのですが。

[8] mixiユーザー 05月13日 00:51

一応の解決を見たのかどうか‥現在自宅でWin環境がないので安心できないのですが、
<div class="section" style="height:auto;">とすると、なんとかギロチン現象を回避する事ができ、表示の上では期待どおりの結果が得られました。
Mac環境であれば、IE,Safari,FF2,Opera9の4環境でそのheight:auto;の影響は出てないようです。
これでWinまで大丈夫であればこれで逃げをうつ事に致します…

cssで指定できればソースもきれいだし、問題があったときにwinにheight:auto;の影響をハックで取り除くことも出来るかなと思い、新たにheight:auto;を指定したクラスを指定しましたが、これはやはりダメでした。

確実に何かのバグなんですよね…ありがとうございました。

[9] mixiユーザー 05月13日 01:51

自分の場合、そういう問題に出くわしたら、仕方ないので部分的にtableを使っちゃいます。この場合だと、そのsectionをtableにって感じで。

CSSでやってるとtable使うのは悔しい面もありますけど、そのために複雑なハックでCSSをうめつくすのは、自分以外の人間が編集するのが不可能になりますし、後で自分が見てもなんだっけってなってますから自分の場合...

MAC IEなんてCSS2を完全に実現できるわけじゃないんで、ある程度CSSでやる部分を減らして割り切った方がいいかもしれないですね～

[10] mixiユーザー 05月13日 02:48

9: Takazudoさん
＞ある程度CSSでやる部分を減らして割り切った方がいいかもしれないですね～

そうですよね…一応テーブルにする場合の時間算出もしたりしたんですが、やはり悔しさが先に立ちまして、むきになってCSSで解決してしまいました。
普段はCSS仕様書も作るのですが、この件であまりにも悩まされたので、この案件の仕様をつくるのが気が重いです…
早く旧バージョンのIEは絶滅して欲しいです…（昔はMacIE5にはお世話になったものなんですが…）

ログインすると、みんなのコメントがもっと見れるよ