0

その上に次のようなエラーが表示されるフォームがあります

<div class="form-error" id="optin_error" style="display: none; ">You must opt-in to participate.</div>

そして、内部に<form>たくさんの入力がある内部のフォームdivs...本当に異常なことは何もありません。

しかし、私は自分のフィールドでjavascript検証を行っており、フォームエラーからdisplay:none;コンテナdisplay:block;フィールドのサイズを変更します。問題は、下に移動しないフッター（これもdiv内）があるという事実にあります。IE8開発者を開いて、メインコンテナー（すべてをラップする）を見ると、それも拡張されません。たとえば、メインコンテナの幅のスタイルのチェックを外してから再チェックすると、すべてが修正されます。

div内の要素がdisplay：noneから変わったときに、IE8にdivの「サイズ変更」を強制する方法はありますか。表示する：ブロック;

PS。面白いCSS、フロート、絶対的なポジショニング、これを引き起こすものは何もありません...

フォームエラーブロックCSS

.form-error {
    color: #EB1F25;
}

フッターブロックCSS

.footer-wrapper {
    border-top: 1px solid #000000;
    margin: 30px 0 10px 0;
}
.footer-wrapper .links {
    width: 960px;
}

調査の結果inline-block、コンテナの属性が問題の原因であるようです。

4

3 に答える 3

1

結局、display：inline-block;の問題になりました。要素のサイズが変更されていません。フロートへの変更が機能しました。

于 2012-09-08T02:59:35.663 に答える
0

ラッパーに幅を与えてみてください。フッターはメインラッパー内にある必要があることを覚えておいてください。また、他のdivの高さを指定してください... min-heightまたは同様のもの。

.footer-wrapper {
border-top: 1px solid #000000;
margin: 30px 0 10px 0;
width: 960px;
}
.footer-wrapper .links {
  width : 100px;
}
于 2012-09-07T14:33:59.817 に答える
0

何が問題を引き起こしているのかを正確に判断するのは困難です。ただし、次のヒントのいくつかを試すことができます。試してみることをお勧めします。

.form-errorが実際の の前 (上) に表示されている場合は、これら 2 つのブロックの間にタグ<form ...></form>を挿入してみてください。そうでない場合は、およびに<br clear="all"/>追加clear:allします。<form ...>width:100%.form-error

そうでない場合は、最初に に追加position:relativeし、役に立たない場合は、それも追加します。overflow:hidden.form-error<form...>

すでに述べたように、コード全体を見ることができれば、はるかに簡単になります。IE は html レンダリングに非常に厳密であるため、 cssおよびhtmlソース コード全体で jsbin を使用してみてください。

于 2012-09-07T14:44:05.150 に答える