CSS3 calc (100%-88px) no funciona en Chrome

Me di cuenta de que mi uso de la función CSS3 calc() como la unidad para width no está funcionando en la última versión de Chrome.

En las herramientas para desarrolladores de Chrome, la regla con calc() tiene un tachado a través de ella y un signo de exclamación en un triángulo amarillo a la izquierda de la misma. Esto indica que la propiedad o el valor no se reconoce.

¿Cómo consigo que funcione en los navegadores modernos? Debido a que es un valor y no una propiedad, ¿dónde los prefijos de proveedor ir?

Actualización:

Cuando digo que no funciona, me refiero a que Chrome Dev Tools está diciendo que no está reconociendo mi uso de la misma width: calc(100%-88px);. ¿Cómo sé que no lo está reconociendo? Debido al tachado y el icono de triángulo amarillo junto a la regla de estilo en chrome dev tools.

Author: Cœur, 2013-04-30
Source

3 answers

El problema en la pregunta fue causado por la falta de espacio alrededor del operador de resta.

Tenga en cuenta que la gramática requiere espacios alrededor de los binarios ' + 'y' -' operador. Los operadores ' * ' y ' / ' no requieren espacios.

Https://www.w3.org/TR/css3-values/#calc-syntax

Especulo que esto es para dejar en claro la diferenciación entre operadores y números con signo.

Malo: calc(100%-88px)
Bueno: calc(100% - 88px)

¿Cómo sé que no lo está reconociendo? A causa del golpe y el icono del triángulo amarillo junto a la regla de estilo en chrome dev herramienta.

Una propiedad que es golpeado en cuando se ve en las herramientas de desarrollo de Chrome puede ser válida, pero anulada; sin embargo, una propiedad golpeado a través de y con un icono de triángulo de advertencia junto a ella no es válido.

Otros Notas

  • Chrome ha soportado calc() para bastante tiempo (confirmado en OSX y Windows).
  • Chrome puede no ser compatible con unidades viewport como vh/vw inside calc(). A finales de 2014, hay actividad en la implementación de esto, pero el error relacionado todavía está abierto.
  • En mis pruebas, Safari soportará calc() con el prefijo de proveedor -webkit en OSX pero no en Windows.
  • IE9+ soporta calc() sin prefijo de proveedor.
  • FF soporta calc() sin prefijo de proveedor.
 123
Author: Tim Medora,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-04-08 22:16:51

Use -webkit prefijo y espacios alrededor del operador 

width: -webkit-calc(100% - 88px);
width: -moz-calc(100% - 88px);
width: calc(100% - 88px);
 11
Author: Tamil Selvan C,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2015-07-27 05:53:56

Tuve problemas con la propiedad calc un poco y solo el enfoque inferior funcionó.

-webkit-calc(~'100% - 40px'); // good: result 395px (in my application)

Todas las sugerencias anteriores como: 

-webkit-calc(100% - 40px); // bad: result 60%

Terminó con un cálculo incorrecto como el 60%.

Espero que ayude a alguien.

 4
Author: Tomasz Czechowski,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-02-17 10:51:16