IE6のjQueryダイアログの修正または回避-ダイアログにフォームが含まれる場合の主要なレイアウトの問題
-
03-07-2019 - |
質問
フォームを含むjQueryダイアログを使用しています。 IE6では、フォームの上に説明のつかないパディングがいくつかあります。フォームをマークアップから削除すると、最も深刻なレイアウトの問題はなくなります。テーマなし(デフォルト)、Flora、およびthemerollerテーマで試しましたが、すべて同じ問題があるようです。
ダイアログCSSにさまざまな調整を試みましたが、何も効果がないようであり、ダイアログが作成されたときに他のスタイルが適用されないように、かなりの量のインラインCSSが書き込まれます。
フローティングなどのフォーム自体にcssプロパティを設定しようとしました。マージンやパディングを削除したり、インラインで表示したりしましたが、フォームがある限り余分なスペースがあります。誰かがこれの回避策を見つけることができましたか?ハックせずに、フォームタグのないフォームコントロールを使用します。
ありがとう。
解決
既存のサイト、フォーラム、ウィジェットなどのCSSテーマを作成する必要があるときはいつでも、常にすべてのスタイルシートを取り除き、すべての主要なHTML DOM要素のすべてのマージンとパディングを0に正規化します。これは、インラインcssに関しては特に重要です。
フォーム要素自体のインラインCSSを削除する必要があります。次に、次のようなものを試してください:
form {
margin: 0;
padding: 0;
overflow: hidden;
}
IE6のテイミングオーバーフローは、多くの場合、多くのマージンの問題を解決します。次のスタイルを使用して、すべてのhtml要素に一時的に境界線を設定して、以前の要素がフォームのスペースにあふれているかどうかを確認してください。
* {
border: solid 1px #FF0000;
}
フォームに課している境界線が表示される場合は、その要素のオーバーフローも抑制してください。
他のヒント
CSSを変更する前に、ページに適切な doctypeがあることを確認してください。
Doctypeがない場合、ブラウザは 'quirks' モードや多くのものが正しく表示されません。
以前にもボタンと説明のつかないマージンで同様の問題がありました。 IE6には、親要素のマージンを継承する要素がいくつかあります。非常に奇妙な...
この修正を試してください: http:/ /blog.netscraps.com/internet-explorer-bugs/ie6-ie7-margin-inheritance-bug.html
次のようなものを試してください:
#yourDiv { padding:1.2em; margin-right:2.4em; }
#yourDivは、タグを含むdivのIDです(入力でこの問題が発生しました)。