Плывет Слишком Далеко, Верно
-
06-07-2019 - |
Вопрос
У меня есть веб-приложение для управления записями, которое отображает основную запись на одном экране и динамически подключает встроенные редакторы к редактору 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)
Я работаю с юридически конфиденциальной информацией, поэтому не могу предоставить скриншоты приложения.Я, однако, сделал несколько снимков и заблокировал текст и интерфейс, оставив только структуру окна.
Решение
Возможно, вы захотите рассмотреть возможность простого использования Диалоговое окно jQuery вместо этого, поскольку он готов и стили уже работают кроссплатформенно.
Другие советы
Для справки, что помогло исправить это, так это изменить CSS для closebutton с
float: right;
Для
position: absolute;
right: 5px;
text-align: right;
Это дает надлежащие результаты в IE, и при небольшом заполнении внутренних полей формы можно не беспокоиться о перекрытии.
Иногда требуются взломы CSS:
* + html #editor #closebutton /* IE7 */, * html #editor #closebutton /* IE6 */ {margin-right: 100px;} // insert whatever value that fits here
для специфичных для 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.