Плавающий слишком далеко вправо
У меня есть веб-приложение для управления записями, которое отображает основную запись на одном экране, и AJAX-редакторы динамически встроены в редактор 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 это похоже на то, что я ожидал - ширина окна равна ширине редактора, а кнопка закрытия находится в правом верхнем углу.
Я не особо привязан к float: верно, просто ищу способ настроить CSS, который даст мне одинаковый результат во всех браузерах. Любые идеи?
"Скриншоты"
Вот макет того, что я хотел бы сделать на jsbin (спасибо, redsquare)
Я работаю с конфиденциальной юридической информацией, поэтому не могу предоставить скриншоты приложения. Однако я сделал несколько снимков и заблокировал текст и интерфейс, оставив только оконную структуру.
Ответы 4
Иногда нужны CSS-хаки:
* + html #editor #closebutton /* IE7 */, * html #editor #closebutton /* IE6 */ {margin-right: 100px;} // insert whatever value that fits here
Но #editor можно перетаскивать туда, куда люди хотели бы его поместить. Его можно поставить у правого края окна. Даже если я работаю перемещением кнопки закрытия в drop code редактора - хм. У меня есть идея, что сейчас может сработать.
Неа. Установка ширины div редактора равной ширине редактора после его рендеринга по-прежнему делает его слишком широким. Думал, у меня там что-то есть.
для конкретных css-хаков IE вы можете сделать что-то вроде:
#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.
Возможно, вы захотите вместо этого просто использовать Диалог JQuery, поскольку он готов и стили уже работают на кросс-платформе.
Спасибо! Чувак, и следующее, что я собирался сделать с этим, - это тоже сделать модель типа лайтбокса!
Для записи, что помогло исправить это, так это изменение CSS для closebutton с
float: right;
к
position: absolute;
right: 5px;
text-align: right;
Это дает правильные результаты в IE, и с небольшим заполнением для внутренних полей формы можно не беспокоиться о перекрытии.
Ну, это действительно помогло, так как изменение «px» в «right» делает свою работу.
Можете ли вы обмануть это, может быть, на jsbin.com или pastebin.me