2012-06-21 3 views
0

я это, пытаясь сделать модальное окно для сайта: http://jsfiddle.net/qHqvn/Последовательное вертикальное выравнивание

Я хочу, чтобы она выглядела последовательной вдоль браузеров IE6, Firefox и Chrome. Однако я делаю что-то неправильно, потому что в каждом браузере он отображается по-разному. Я хочу, чтобы красный ящик всегда занимал 50% ширины и высоты экрана и не позволял пользователю взаимодействовать с содержимым ниже, пока они не закрыли его.

В хромированном режиме он ведет себя так, как я ожидаю, но в firefox ящик никогда не бывает там, где я хочу, он центрирован по горизонтали, но не по вертикали, и если я изменю размер окна навигатора, он будет продвигаться еще дальше. В IE6, ну, нет слов для этого, он просто не будет делать работу.

Во всяком случае, это моя вина, что он не ведет себя propperly, но я просто не знаю, что я делаю неправильно

+0

Должно ли это быть модальным ящиком собственного изготовления? Вы посмотрели на диалоги JQuery? http://jqueryui.com/demos/dialog/#modal – amburnside

+0

@amburnside Я не думаю, что это так, но пока, учитывая, что там, где я работаю, они еще не используют jquery (мне нужно будет это предложить), это должно быть мое. Однако мне интересно, что происходит с css независимо от того, как я буду использовать jquery или нет. – Roger

+0

@amburnside Как я могу видеть, что делает jquery, что дает хороший результат? Я больше заинтересован в понимании CSS. Спасибо за помощь. – Roger

ответ

1

Все поля в CSS основаны от в ширину. Таким образом, пока ваш margin-left: -25% работает, и коробка горизонтально центрирована, свойство margin-top: -25% использует 25% ширины окна.

См. Также this answer.

+0

Итак, нет решения, кроме установки фиксированной высоты? – Roger

Смежные вопросы