1. CSS следует размещать над структурой (обычно внутри элемента head). CSS — это интерпретируемый язык, и Firefox и IE не будут ничего отображать, пока не дождутся завершения передачи CSS. Только добавив CSS в начало, можно отобразить страницу, когда браузер анализирует структуру.
Пример исходного кода:
Это вызывает проблему с пустым белым экраном. Страница остается совершенно пустой до тех пор, пока не будет загружена таблица стилей внизу, примерно 6-10 секунд для этой страницы. Браузер ожидает загрузки таблицы стилей, прежде чем отобразить что-либо еще. страница, даже статический текст.
В результате проблема заключается в том, что страница какое-то время будет «простой», а затем снова «великолепной», что приводит к очень плохому пользовательскому опыту.
2. Попробуйте использовать метод импорта стиля <link rel="stylesheet" href="http://www.cnwebshow.com/123.css" type="text/css"> и сократите использование @import, не говоря уже об использовании нескольких уровней вложенности @import. Потому что в IE @import эквивалентен размещению <link> в конце страницы.
Пример исходного кода
Это правильный синтаксис, но, несмотря на то, что он находится в заголовке документа, он нарушает прогрессивный рендеринг и вместо этого вызывает пустой белый экран и мигание Unstyled.