1

私は、1 つの画面にマスター レコードを表示するレコード管理 Web アプリケーションを持っています。AJAXes は動的にエディターをエディター 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 を設定する方法を探しているだけです。何か案は？

「スクリーンショット」

これは私がjsbinでやりたいことのモックアップです（ありがとう、redsquare）

サンプルコード

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

IE7 での表示

Firefox 3 での表示

4

4 に答える 4

6

記録として、これを修正するために機能したのは、closebutton の CSS を

float: right;

に

position: absolute;
right: 5px;
text-align: right;

これにより、IE で適切な結果が得られます。また、内部フォーム フィールドに少しパディングを行うことで、オーバーラップの心配はありません。

于 2009-01-13T16:06:48.700 に答える
1

JQuery ダイアログは事前に作成されており、スタイルは既にクロスプラットフォームで動作するため、代わりにJQuery ダイアログを使用することを検討することをお勧めします。

于 2009-01-09T18:54:34.260 に答える
0

CSS のハッキングが必要になる場合があります。

* + html #editor #closebutton /* IE7 */, * html #editor #closebutton /* IE6 */ {margin-right: 100px;} // insert whatever value that fits here
于 2009-01-09T17:03:50.053 に答える
0

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

于 2009-01-09T18:54:18.473 に答える