フローティングが右端にあります

StackOverflow https://stackoverflow.com/questions/428862

質問

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）

サンプルコード

法的に機密情報を扱っているため、アプリのスクリーンショットを提供できません。ただし、いくつかのショットを撮り、テキストとインターフェイスをブロックし、ウィンドウ構造のみを残しています。

IE7での表示

firefoxでの表示3

役に立ちましたか？

解決

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スタイルの後に配置されていることを確認してください。

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top