web-dev-qa-db-ja.com

レイアウトにパーセンテージ幅を使用する場合のInternetExplorer 7のバグを修正するにはどうすればよいですか？

これで私を助けてください。パーセンテージ幅を使用してレイアウトを作成する必要があります。 100％幅のラッパーがあります。

これでDIVができました（メインラッパー。幅のパーセンテージを94％に保ちたい。本体の100％の94％）。大丈夫です。

だからこれを簡単にするために。

-> BODY 100％幅セット

->コンテナ94％幅

---> FIRST CHILD DIV 70％フロート左（コンテナの70％）

---> SECOND CHILD DIV 30％フロート右（コンテナの30％）

しかし、私はFIRST CHILDDIVの下に2つの等しい列があります

-----> 50％および50％のパーセンテージ幅

バグは次のとおりです。ie7では、最後の列が下部に表示されます。適切にフロートされていません。幅を29.9％に減らすと!!!それは動作します..私はie7がパーセンテージ幅か何かを扱う際にバグがあると思います..これを明確にしてください。 css/htmlが長すぎるので、問題が発生することを願っています。一般的な問題であることを願っています。:(

これがこのDIVのCSSです..お役に立てば幸いです:)

body {
width: 100%;
background: #fff;
text-align: center;
font-size: 12px;
}

#wide-primary {
background: #fff url(img/shadow1.png) repeat-x top;
position: relative;
top: -1px;
}

#primary {
width: 94%;
margin: 0 auto 0 auto;
text-align: left;
}

#features {
float: left;
width: 70%;
padding: 2% 0 0 0;
}

.featurebox {
float: left;
width: 48%;
padding: 0 2% 3% 0;
}

#lastnews {
float: right;
width: 30%;
padding: 2% 0 2% 0;
}
cssinternet-explorerinternet-explorer-7css-float
23
Ahmad Fouad

問題はサブピクセルの丸めです。パーセンテージで設計している場合、計算によって完全なピクセルが得られない場合があります（721pxの70％は504.7pxです）。 721は任意ですが、パーセンテージを使用すると、任意の数に遭遇します。それを避けることはできません。ほとんどのブラウザは、レイアウトを壊さない丸めソリューションを見つけ出します。 IE7（およびそれ以前）は単純に切り上げます。切り上げると、721pxのコンテナ幅には、505pxのボックスと217pxのボックスが含まれ、合計722pxになります（100％以上）。その時点でIEは、2番目のボックスが収まらないと判断し、下にドロップします。

状況に応じてさまざまな解決策があります。ニコールサリバンは、「オーバーフロー：非表示」の使用に基づく興味深いソリューションを持っています。フロート/幅の組み合わせではなく、最後の列に。できる限り使っています。ここでそれをチェックしてください：

http://www.stubbornella.org/content/2009/07/23/overflow-a-secret-benefit/

'overflow'がカットしないときに私が見つけた他の解決策は、行の最後の要素に小さな負のマージンを追加することです。左に浮いている場合は、右側に数ピクセルの負のマージンを追加します。右に浮いて、左に追加します。私はそれによる悪影響に遭遇したことはありません（他の人がそうするなら聞いてうれしいですが）。

お役に立てば幸いです。乾杯。

47
Miriam Suzanne

これに対する簡単な解決策は次のとおりです。

div {
*min-width: 100%;
}

iE7でテスト済み。

8
Nedko

これは私がIE 7でその問題を修正するために使用しているものです。

<!--[if IE 7]>
    <style>
        body {
        padding:0 1% 0 0;
        width:101%;
        }
    </style>
<![endif]-->
0
Erdal Demir

次のことを試してください。

div {
    width: 100%;
    *overflow: auto;
}

IE7でうまく機能します。

0
Poised_flw