Страница не показывает ничего, когда я включаю DOCTYPE ... мой сотый вопрос? - PullRequest
Новая
       16

Страница не показывает ничего, когда я включаю DOCTYPE ... мой сотый вопрос?

2 голосов
/ 21 апреля 2011

UPDATE

Я начал построчно, и это был первый стиль CSS, который позволял браузеру показывать вещи. В частности, абсолютное позиционирование, похоже, все портит ... Я не знаю почему. Если я удаляю это или изменяю на относительное, то все появляется, но, очевидно, не в том месте. 

#foo {
    height: auto;
    width: auto;
    margin-left: -500px;
    padding-top: 300px;
    position: absolute;
    bottom: 0px;
    left: 50%;
    top: 0px;
}

По запросу вы можете просмотреть разметку HTML здесь . Однако обратите внимание, что во время загрузки страницы генерируется много динамического HTML, которого нет в разметке HTML, связанной здесь.

Я не совсем уверен, почему, но когда я включаю HTML5 doctype <!doctype html> в начало моего .html файла, ничего не отображается. Однако проверка исходного кода с помощью инструментов разработчика Chrome показывает, что все находится в DOM и все свойства CSS применяются.

Да !? Weird.

Я начал расследование и обнаружил, что когда я удаляю свою таблицу стилей, т.е. когда я удаляю эту строку ... 

<link type="text/css" rel="stylesheet" href="css/new.css" />

... вещи появляются на странице, но, очевидно, стиль не применяется. Полный файл CSS можно найти здесь .

Любые идеи относительно того, почему это происходит; предложения по исправлению? Я почти уверен, что все мои CSS верны, но, как я слышал, W3C CSS Validator не очень хорошо проверяет CSS3

Ответы [ 2 ]

1 голос
/ 21 апреля 2011

Начните с использования очень ограниченного файла CSS. Значение пустое.

Затем начните добавлять селекторы обратно, пока они не сломаются. Как только это произойдет, вы сможете найти проблему.

UPDATE:
foo переполнена оболочкой. Из-за этого он полностью скрыт.

Если вы добавите «border: solid 1px blue;» к тегу #wrapper, вы поймете, что я имею в виду.

Для получения дополнительной информации см .: Высота в процентах HTML 5 / CSS

По сути, настройка min-height в теге #wrapper ничего не делает, потому что у его родителя (#everything) не установлена ​​высота Единственный способ работы% высоты - это если родительские элементы определяют фактическую высоту.

В этом случае вам нужно добавить следующее: 

html { height: 100%;}
body { height: 100%;}
#everything { height: 100%; ... }

Тогда ваша обертка начнет оборачиваться, и вы сможете вернуться к тому, что у вас было.

Что приводит нас к первоначальному вопросу: почему это работает, когда выкачивают doctype?

Ответ заключается в том, что браузер возвращается в режим причуд, который позаботился о расширении этих div'ов для вас.

0 голосов
/ 21 апреля 2011

Попробуйте <!DOCTYPE html> вместо <!doctype html>

...