4

分離されたテスト ケース(IE 7 または IE 8/9 で IE 7 モードで表示)

このページを IE 7 で表示すると、幅の値が無視されます。パディング値を削除すると、幅は適切に適用されますが、パディングを追加すると、ページ全体が大きくなり、パディングがほとんど余白として扱われます。ページの幅が広いほど、要素の右側の空白領域が大きくなります。これがどのバグなのか、さらに重要なことに、それを修正する方法を見つけることができませんでした。誰もこれを見たことがありますか、そして誰かが解決策を知っていますか?

私がこれまでに試したこと：

  • zoom修理
  • display: inline-block(ダブル垂直パディングの問題に推奨)
  • そうではありませんline-height（幅の問題です...）

問題のスクリーンショット:

この div はページの幅全体にまたがる必要がありますが、スクロールバーがここにあることに気付くでしょ IE 7 発行のプレスクロール う IE 7 の問題ポストスクロール 。

ブラウザー ツールで要素を調べると、幅が、全幅からパディングを差し引いたものではなく、誤ってページの全幅であることがわかります。

4

6 に答える 6

3

免責事項：機能要件と他の回答に対するコメントは無視し、具体的な問題に集中します。

この IE7 固有の問題は、相対的に配置された要素にオフセット ( top、right、bottomまたは など) を使用することによって発生します。left相対的に配置された要素をオフセットすると、基本的には元の位置のスペース全体が保持されます。これは、絶対位置の要素をオフセットする場合には発生しないことに注意してください。

オフセットが適用される前はleft、相対的に配置された要素はその幅と右側のパディングによってビューポートから完全に外れるため、水平スコルバーが生成されます。オフセットが相対的に配置された要素に適用された後、left基本的にはオフセットと同じサイズのスペースをオフセットの反対側、まだビューポートの外側に残しています。

少しまともな Web ブラウザは、再描画中にビューポートの外に何も表示されないことを発見し、スクロールバーを再び非表示にします。ただし、IE7 はそれほどスマートではなく、スクロールバーを保持します。

結局、leftオフセットを使用することは技術的に間違った解決策でした。そもそもmargin-leftの代わりにを使用する必要がありましleftた。オフセットとは異なり、マージンは元の位置に空のスペースを残しませんが、実際には要素全体を目的の位置に押し込みます。

したがって、スクリプトがどのように修正されたかは次のとおりです。

$('#el').css({
    'width': document.body.scrollWidth - 200,
    'padding-right': 200,
    'margin-left': (-1 * (document.body.scrollWidth - 322) / 2) - 1
});

ところで、float: left;100% の幅をシミュレートしたいように見えるこの構成では、それがどのように意味があるのだろうか。おそらく、具体的な例では見えない他の目的のためでしょう。

于 2012-11-02T03:13:29.760 に答える
1

私はskeleton.cssの実装でこの問題を抱えていました。具体的には、 my#headerは の幅をbody取り、これは の幅を取りましたhtml。残りのコンテンツのセット幅は 978px です。そのため、ウィンドウが 978 より小さい場合、ヘッダーの背景はビューポートの幅にのみレンダリングされます。つまり、幅 500 でレンダリングを開始した場合、幅はそれ#headerだけになります。ビューポートのより広い幅をドラッグしても問題はありませんでしたが、右スクロールするとヘッダーが最初のビューポートのサイズにカットされました。

私の修正：html,body { min-width:978px } /* your width may vary */

于 2012-10-30T17:10:59.527 に答える
1

これは、幅の計算に JavaScript を使用せずにパディングを使用せずに解決できます。代わりに を使用しますposition: absolute。これが更新されたフィドルです。どのブラウザでも動作します

#el {
    background-color: #FFFF00;
    min-height: 45px;
    width: 100%;
    position: absolute;
    left:0;
    right: 0;
    top: 0;
}

http://jsfiddle.net/LRpHq/7/

于 2012-10-26T22:18:29.413 に答える
1

resize()Javascript の使用に問題がないように思われるので、関数を調整します。

function resize () {
    $('#el').css({'width':$(window).width(),'position':'absolute','left':'0px'});
}
于 2012-10-30T23:26:39.377 に答える
1

マイルがずれていたため、元の投稿を修正しました。

編集：

サンドボックス化された IE7 でテストされ、動作します。（私は完璧なものを手に入れるために邪魔をしません。また、ここでは新しいので、報奨金は非常に正直になるのに本当に役立ちます）また、IE7、IE8、IE9、FF3.6でネイティブに動作することにも注意してください、Opera 10 であり、Safari で問題なく動作するはずです。Chrome は私のデフォルトのブラウザであり、動作することは間違いありません。

JS は次のとおりです。

function resize () {
$('#el').trigger('resize').width('100%');
}
resize();

そしてCSS：

#container {
    width: 320px;
    border: 1px solid #000000;
    min-height: 500px;
    margin: 0px auto;
}
#el {
    background-color: #FFFF00;
    min-height: 45px;
    width: 100%;
    position: absolute;
    left: 0;
}
于 2012-10-30T17:36:43.373 に答える
0

ここで同様の問題の解決策を見つけました。それがあなたにも役立つかどうかを確認してください。

于 2012-11-02T10:50:22.680 に答える