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

0

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

  • 0
    можете ли вы придумать это на jsbin.com или pastebin.me?
Теги:
css-float
internet-explorer-7
internet-explorer-6

4 ответа

1
Лучший ответ

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

Поделиться
  • 0
    Спасибо! Чувак, и следующее, что я собирался сделать с этим, это сделать модель лайтбокса тоже!
  • 0
    Это должен быть принятый ответ stackoverflow.com/a/439569/8685260
5

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

float: right;

к

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

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

Поделиться
  • 0
    Ну, это действительно помогло, так как изменение 'px' в 'right' делает работу
0

для 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-стиля.

Поделиться
0

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

* + html #editor #closebutton /* IE7 */, * html #editor #closebutton /* IE6 */ {margin-right: 100px;} // insert whatever value that fits here
Поделиться
  • 0
    Но #editor можно перетаскивать везде, где люди хотели бы разместить его. Они могут поставить его против правого края окна. Даже если у меня работает перемещение кнопки закрытия в код редактирования редактора - хм. У меня есть идея для чего-то, что может сработать сейчас.
  • 0
    Нет. Установка ширины редактора div в соответствии с шириной тела редактора после его рендеринга по-прежнему делает его слишком широким. Думал, у меня там что-то есть.
Показать ещё 2 комментария

Ещё вопросы

Сообщество Overcoder
Наверх
Меню