Почему этот небольшой фрагмент HTML / CSS не дает ожидаемых результатов в IE? - PullRequest
Новая
       22

Почему этот небольшой фрагмент HTML / CSS не дает ожидаемых результатов в IE?

1 голос
/ 07 февраля 2010

Вы можете сохранить приведенный ниже код и попробовать его.

В firefox он полностью серый браузер, но в IE (точнее IE7) он не работает. 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style text="text/css">
.overlay {  
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    z-index:1000;
    background-color:grey;
}
</style>
</head>
<body style="font-size:62.5%;">

<div class="overlay"></div>

</body>
</html>

Ответы [ 2 ]

4 голосов
/ 07 февраля 2010

IE не распознает имя цвета CSS grey. Попробуйте использовать шестнадцатеричный цвет, например, #ccc, и он будет работать. Кроме того, использование gray (с «a», а не «e») также работает.

Обратите внимание, что это соответствует стандартам, поскольку W3C ничего не говорит о поддержке альтернативного написания gray, а gray действительно является именем цвета в соответствии со спецификацией для CSS3 .

0 голосов
/ 07 февраля 2010

Попробуйте добавить это в ваш стиль определения: 

html, body {
    height: 100%;
}

В IE body не увеличивает полную высоту области просмотра по умолчанию, и контейнер вашего оверлея имеет значение body, поэтому ...

Редактировать Только что попробовал, и ваш работал без вышеуказанного, должно быть потому, что тело статически расположено. Во всяком случае, Джон Феминелла понял это; см. его ответ.

...