Плывет Слишком Далеко, Верно

Question

У меня есть веб-приложение для управления записями, которое отображает основную запись на одном экране и динамически подключает встроенные редакторы к редактору 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 это выглядит так, как я и ожидал - окно размером с editorbody, а closebutton находится в правом верхнем углу.

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

"Скриншоты"

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

пример кода

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

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

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

Answer 1

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

Answer 2

Для справки, что помогло исправить это, так это изменить CSS для closebutton с

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-взломов вы можете сделать что-то вроде:

#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.