1

我有一个记录管理 Web 应用程序，它在一个屏幕上显示主记录，AJAXes 将编辑器动态构建到编辑器 div 中，我使用 JQuery 使其可拖动。这样可行。

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

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

Editorbody 是可变尺寸的，具体取决于人们试图输入的内容。

Draghandle 的宽度设置为编辑器的 100%。Closebutton 在 CSS 中设置为float:right.

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

我并不是特别喜欢 float:right，只是想寻找一种方法来设置 CSS，它可以在所有浏览器中为我提供相同的结果。有任何想法吗？

“截图”

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

示例代码

我正在处理法律敏感信息，因此我无法提供该应用的屏幕截图。然而，我拍了一些照片，把文字和界面挡住了，只留下了窗口结构。

它在 IE7 中的外观

它在 Firefox 3 中的外观

4

4 回答 4

6

作为记录，解决此问题的方法是将关闭按钮的 CSS 从

float: right;

到

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

这会在 IE 中产生正确的结果，并且对内部表单字段进行一些填充，无需担心重叠。

于 2009-01-13T16:06:48.700 回答
1

您可能想考虑只使用JQuery 对话框，因为它的预制和样式已经跨平台工作。

于 2009-01-09T18:54:34.260 回答
0

有时需要 CSS hack：

* + 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 hack，您可以执行以下操作：

#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*/    
}

只需确保将星号和下划线 hack 放置在正常（有效）css 样式之后。

于 2009-01-09T18:54:18.473 回答