浮动太远了

Question

我有一个记录管理Web应用程序，它在一个屏幕上显示主记录，AJAXes动态构建编辑器到编辑器div中，我使用JQuery来制作可拖动的。这很有效。

即使div不是一个窗口，我认为让它更像一个窗口可能是一个好主意，所以我编写了一个“关闭”窗口。按钮。结构如下所示：

<div id="editor">
  <div id="draghandle" />
  <div id="closebutton" />
  <div id="editorbody" />
</div>

编辑主体是可变维度，取决于人们想要进入的内容。

Draghandle的宽度设置为编辑器的100％。 Closebutton在CSS中设置为 float：right 。

我的问题是，在IE6和IE7中，关闭按钮浮动太远了。它总是在窗口的右边缘，无论我在哪里拖动编辑器div。在Firefox和Safari中，它看起来像我预期的那样 - 窗口和编辑器一样宽，而按钮位于右上角。

我并不特别喜欢浮动：对，只是想找到一种方法来设置CSS，它会在所有浏览器中给出相同的结果。有什么想法吗？

＆QUOT;屏幕截图＆QUOT;

这是我想在jsbin上做的一个模型（谢谢，redsquare）

示例代码

我正在使用法律敏感信息，因此我无法提供该应用的屏幕截图。但是，我拍摄了一些照片并屏蔽了文本和界面，只留下了窗口结构。

它在IE7中的外观

它在firefox中的外观3个

Answer 1

您可能需要考虑使用 JQuery Dialog ，因为它的预制和样式已经跨平台工作了。

Answer 2

为了记录，解决这个问题的方法是从

更改关闭按钮的CSS

float: right;

到

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

这在IE中产生了正确的结果，并且对于内部表单字段有一点填充，不用担心重叠。

Answer 3

有时需要CSS黑客攻击：

* + html #editor #closebutton /* IE7 */, * html #editor #closebutton /* IE6 */ {margin-right: 100px;} // insert whatever value that fits here

Answer 4

对于IE特定的css hacks，您可以执行以下操作：

#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样式之后放置星号和下划线黑客。