Плавающий слишком далеко справа

Question

У меня есть веб-приложение для управления записями, которое отображает основную запись на одном экране, а AJAX динамически встраивает редакторы в div редактора, который я использовал в JQuery для перетаскивания. Это работает.

Несмотря на то, что div не является окном, я подумал, что было бы неплохо сделать его более похожим на одно, поэтому я закодировал кнопку «закрыть». Структура выглядит так:

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

Editorbody имеет переменную размерность в зависимости от того, что люди пытаются ввести.

Ширина Draghandle установлена ​​на 100% от редактора. Кнопка закрытия установлена ​​в CSS как float:right.

Моя проблема в том, что в IE6 и IE7 кнопка закрытия плавает слишком далеко вправо. Это всегда у правого края окна, куда бы я ни перетащил редактор div. В Firefox и Safari все выглядит так, как я и ожидал - окно такое же широкое, как тело редактора, а кнопка закрытия расположена в верхнем правом углу.

Я не особо привязан к float: верно, просто ищу способ настроить CSS, который даст мне одинаковый результат во всех браузерах. Есть идеи?

"Скриншоты"

Вот макет того, что я хотел бы сделать на jsbin (спасибо, красный квадрат)

образец кода

Я работаю с юридически конфиденциальной информацией, поэтому не могу предоставить скриншоты приложения. Однако я сделал несколько снимков и заблокировал текст и интерфейс, оставив только структуру окна.

как это выглядит в IE7

как это выглядит в Firefox 3

Answer 1

Для справки, чтобы исправить это, нужно было изменить CSS для кнопки закрытия с

float: right;

до

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

Это дает правильные результаты в IE, и с небольшим дополнением для внутренних полей формы нет проблем с перекрытием.

Answer 2

Возможно, вы захотите использовать вместо этого JQuery Dialog , поскольку он уже готов и стили работают на кроссплатформенности.

Answer 3

для специальных 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.

Answer 4

CSS-хаки нужны иногда:

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