Почему первый селектор в моем CSS файле игнорируется браузерами? - PullRequest
Новая
       6

Почему первый селектор в моем CSS файле игнорируется браузерами?

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

Я боролся с этой проблемой сегодня несколько часов и думал, что поделюсь этой проблемой и решением. Решение может помочь в нескольких поисках:

  • Почему первый селектор в моем файле CSS игнорируется браузерами?
  • Почему первая строка в моем файле CSS игнорируется браузерами?
  • Почему универсальный селектор игнорируется браузерами?

Я не думал, что коснулся CSS для своего веб-проекта, однако я делал некоторые обновления и изменение некоторых конфигураций. Внезапно, стиль был далеко. С инспектором в браузере я обнаружил, что мой CSS сброс не был применен.

Мой CSS файл начинается с: 

* {box-sizing:border-box;font-size:100%;line-height:1.5em;font-family:'Open Sans', sans-serif;vertical-align:baseline;word-wrap:break-word;word-break:break-word;margin:0;padding:0;border:0;-webkit-tap-highlight-color: rgba(0,0,0,0);}

Я уже обнаружил, что это был не универсальный селектор, который был проигнорирован ... потому что, если я добавлю строку с html {}; над ним, универсальный селектор снова станет активным.

Я думал, что это может быть первая строка, которая была проигнорирована ... поэтому я изменил html {}; на закомментированную строку ... и тогда первый селектор в следующей строке больше не работал.

1 Ответ

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

Каким-то образом файл CSS был сохранен, начиная с метки порядка байтов.

Это не было видно в коде Visual Studio или vim, но оно было едва различимо в инспекторе Chrome: Chrome Inspector, Showing BOM as first character of the first line.

Эта красная точка в качестве первого символа первой строки является меткой порядка байтов. Редактирование этого в инспекторе решило проблему (для этого экземпляра загрузки).

Я не уверен, как он проник в один файл ... но его было просто удалить с помощью vim:

  • Откройте файл в vim: vim <filename>
  • Удалите спецификацию с помощью :set nobomb
  • Сохраните и выйдите: :w:q

Надежда это помогает кому-то сэкономить время!

Примечание. Возможно, проблема заключается в том, как файл был обработан. Он был выведен Drupal с использованием print file_get_contents();, и перед спецификацией мог быть вставлен дополнительный символ новой строки. Возможно, если бы спецификация была на самом деле первым персонажем, все было бы хорошо?

...