Как преодолеть недопустимое значение свойства CSS cal c (), но при вводе в инспекторе тот же код работает? - PullRequest
Новая
       70

Как преодолеть недопустимое значение свойства CSS cal c (), но при вводе в инспекторе тот же код работает?

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

У меня есть следующий код в файле .s css: 

.device_content_div {
    width: calc(100% – 169px);
    margin-left: 204px;
  }

Он обрабатывается Gulp. Когда я открываю соответствующую страницу в инспекторе Chrome, появляется предупреждение о недействительном свойстве.

enter image description here

Однако, когда я набираю точно такой же код, В инспекторе вручную оповещение отсутствует, и код работает как надо.

enter image description here

То же самое относится и к Firefox и Safari. Я попытался добавить его как вставку в саму страницу html и как «необработанный» простой файл. css, но происходит то же самое. Я удостоверился, что между оператором и числами есть пробелы, но безрезультатно. Я действительно застрял здесь.

Как это может произойти, и как я могу это исправить?

1 Ответ

2 голосов
/ 19 февраля 2020

Первый не похож на символ минус -. Это немного шире. На самом деле это символ en dash, а не minus. Отметьте здесь -> https://www.babelstone.co.uk/Unicode/whatisit.html и скопируйте / вставьте используемый вами символ, а затем напишите символ минус -.

У них разные юникоды. Этот – (тот, который вы используете) является EN DA SH (вы можете сделать это с помощью ALT + 0150), а этот - - это ГИФЕН-МИНУС {дефис или знак минуса}.

Я предполагаю, что вы скопировали / вставили код откуда-то, и вы случайно вставили en dash вместо minus.

должно быть calc(100% - 169px) iso calc(100% – 169px) вы можете видеть, что есть небольшая разница в ширине символа

См. пример ниже 

div {
  height:50px;
  background: red;
  margin: 10px 0;
}
div.first {
  /* EN DASH */
  width : calc(100% – 169px);
}

div.second {
  /* minus */
  width : calc(100% - 169px);
}
<div class="first">
  Not working ( EN DASH )
</div>
<div class="second">
  Working ( minus )
</div>
...