Почему IE отображает вертикальную полосу прокрутки со 100% высотой содержимого?

У меня есть видеопроигрыватель Silverlight, который я хочу отображать в режиме «100% ширины / высоты браузера» (т.е. не в полноэкранном режиме, а заполняет всю область отображения браузера).

Обычный игрок: http://play.nimbushd.com/lfu53b5

Полноэкранная версия: http://play.nimbushd.com/lfu53b5/fullscreen

Я пробовал почти каждый узел в DOM и установил ширину / высоту на 100%, с margin: 0px, padding: 0px. Кажется, отлично работает в Firefox. Почему же тогда IE отображает вертикальную полосу прокрутки с небольшим пробелом внизу?

Изменить: так как эта проблема исправлена, краткое объяснение: элемент управления Silverlight со 100% высотой / шириной в теге ASP.NET <form> немного выходит за рамки IE из-за тега form.


html css internet-explorer silverlight
person Brandon    schedule 25.06.2011    source источник

Ответы (2)


arrow_upward
12
arrow_downward

Такое поведение вызвано тем, что встроенные элементы внутри <form> - встроенные элементы всегда отображают line-height пикселей. Это исправит любое из следующих правил CSS:

form { font-size: 0; }

or

form * { display: block; }

В качестве альтернативы вы можете попытаться избавиться от всех встроенных потомков <form> (включая текстовые узлы), но я не уверен, что это действительно сработает (не проверено). Кроме того, это затруднит поддержку вашей разметки (вам нужно будет удалить все символы новой строки и тому подобное ... можно сделать во время развертывания, но я думаю, что это заходит слишком далеко).

person Jakub Januszkiewicz    schedule 25.06.2011
comment
Идеально! Я понятия не имел, что на это повлияет тег формы; font-size: 0 отлично работает !! Спасибо! - person Brandon; 25.06.2011
comment
Подумав об этом, кажется странным, что Firefox не показывает такое поведение. Мне любопытно, является ли это ошибкой в ​​стандартах IE8 (режим причуд IE7 и IE8 не имеет этой проблемы; я не могу проверить IE9 в данный момент). Или, может быть, IE8 на самом деле соответствует стандартам, а Firefox более снисходительно относится к текстовым узлам, содержащим только пробелы (поскольку я считаю, что это то, что вызывает проблему в IE). - person Jakub Januszkiewicz; 25.06.2011
comment
Я подозревал, что проблема в пробеле. +1, хорошая работа. - person thirtydot; 26.06.2011
comment
Была такая же проблема с тегом <object> внутри тега <form>. Установка высоты объекта на высоту формы всегда была на 1 пиксель больше. После установки свойства CSS display элемента <object> на block теперь все работает нормально. Большое спасибо за этот ценный ответ !!! - person AxD; 09.11.2016

arrow_upward
3
arrow_downward

Вам понадобится этот стиль в вашем html:

<style type="text/css">
html, body {
    height: 100%;
    overflow: hidden;
}
body {margin: 0px}
</style>

Обратите внимание, что это применяет стиль как к html, так и к body, чтобы обеспечить соответствие высоты элемента html высоте области просмотра и, следовательно, тела.

person AnthonyWJones    schedule 25.06.2011