フローティングが右端にあります
-
06-07-2019 - |
質問
1つの画面にマスターレコードを表示するレコード管理Webアプリケーションと、AJAXがエディターをエディターdivに動的に構築し、JQueryを使用してドラッグ可能にしました。動作します。
divはウィンドウではありませんが、もう少し似たような動作をさせるのは良い考えだと思ったので、「閉じる」コードでコーディングしました。ボタン。構造は次のようになります。
<div id="editor">
<div id="draghandle" />
<div id="closebutton" />
<div id="editorbody" />
</div>
Editorbodyは、入力しようとしているものに応じて可変次元です。
ドラッグハンドルの幅はエディターの100%に設定されています。 Closebuttonは、CSSで float:right
として設定されています。
私の問題は、IE6とIE7では、閉じるボタンが非常に右にフロートすることです。エディターdivをどこにドラッグしても、常にウィンドウの右端に配置されます。 FirefoxとSafariでは、期待したように見えます-ウィンドウはエディター本体と同じ幅で、右上の隅に閉じるボタンがあります。
float:rightに特にこだわりはありません。すべてのブラウザーで同じ結果が得られるCSSをセットアップする方法を探しているだけです。アイデアはありますか?
&quot;スクリーンショット&quot;
jsbinでやりたいことのモックアップです(ありがとう、redsquare)
法的に機密情報を扱っているため、アプリのスクリーンショットを提供できません。ただし、いくつかのショットを撮り、テキストとインターフェイスをブロックし、ウィンドウ構造のみを残しています。
解決
JQueryダイアログを使用することを検討してください。すでにクロスプラットフォームで動作します。
他のヒント
記録では、これを修正するために働いたのは、閉じるボタンのCSSを
float: right;
to
position: absolute;
right: 5px;
text-align: right;
これにより、IEで適切な結果が生成されます。内部フォームフィールドに小さなパディングがあれば、オーバーラップの心配はありません。
CSSハックが時々必要です:
* + html #editor #closebutton /* IE7 */, * html #editor #closebutton /* IE6 */ {margin-right: 100px;} // insert whatever value that fits here
IE固有のCSSハックの場合、次のようなことができます。
#divId {
margin-right: 0; /*Normal styles for all browsers*/
*margin-right: 100px; /*The asterisk allows only for IE6 AND IE7 to read this*/
_margin-right: 90px; /*The underscore allows only IE6 to read this style*/
}
アスタリスクとアンダースコアのハックが通常の(有効な)CSSスタイルの後に配置されていることを確認してください。