¿Por qué la función CSS calc () no funciona para mí?

Aprendí acerca de la función de CSS calc () y es impresionante. Intenté usarlo así:

#abc{width:calc(100%-20px)} 

Pero el problema con esta función es que no funciona. Probé este código IE9 y Safari y no funcionó.

¿Por qué no funciona?

El operador “-” debe estar rodeado de espacios:

 #abc{width:calc(100% - 20px)} 

Citando información de MDN en calc() : “Nota: Los operadores + y – siempre deben estar rodeados por espacios en blanco. El operando de calc (50% -8px), por ejemplo, se analizará como un porcentaje seguido de una longitud negativa, una expresión no válida, mientras que el operando de calc (50% – 8px) es un porcentaje seguido de un signo menos y una longitud ”

La statement formal sobre esto se encuentra en la cláusula 8.1.1 del Módulo de valores y unidades de CSS Nivel 3 CR.

Todos los navegadores modernos, excepto el navegador nativo de Android, admiten calc() que hace que sea más fácil de adoptar. Pero tenga en cuenta que puede tener un gran impacto en el diseño y la consecuente ruptura de su diseño en navegadores no compatibles.

Debería usarlo con una statement alternativa, para que no rompa los navegadores que no lo admiten.

 width: 500px; /** older browsers **/ width: -webkit-calc(50% - 20px); /** Safari 6, Chrome 19-25 **/ width: -moz-calc(50% - 20px); /** FF 4-15 **/ width: calc(50% - 20px); /** FF 16+, IE 9+, Opera 15, Chrome 26+, Safari 7 and future other browsers **/ 

Es compatible con IE9, IE10 y Safari 6.0 ( utilizando el prefijo -webkit- ). Puede consultar la tabla de soporte completo aquí: http://caniuse.com/#feat=calc

La implementación de IE9 del método calc() no funciona en elementos que son display: table .

Puede solucionar esto envolviendo un div alrededor de él (que es display: block ) y haciendo el ancho de la display: table elemento de display: table dentro de width: 100% . Aplica el ancho de calc d al div circundante.

Con la última versión de Modernizr puede verificar el soporte de csscalc. Simplemente use Modernizr.csscalc . Esta función devolverá true si es compatible y falsa si no lo es. En tu caso, tendrías esto en tu css:

 #abc { width:calc(100% - 20px); } 

y en tu javascript (estoy usando jQuery aquí)

 if(!Modernizr.csscalc){ $('#abc').width($(PARENT_EL).width() - 20) } 

Por cierto. Es mejor diseñar sus elementos con nombres de clase en lugar de con ID. La ID de un elemento solo debe usarse para dirigirse a ella a través de javascript .

Necesita espacios y también si usa el preprocesador, formatéelo como este calc(~"100% - 20px") o podría no funcionar.

En primer lugar, debe haber espacios antes y después de + o - . También puede usar * , / , y combinarlos. Ver ejemplo:

 .gen { height: 100px; background-color: blue; border: solid 1px black; } .nocalc { width: 50%; } .calc { width: calc(100% / 4 * 2 + 50px - 40px); /* 50% + 10px */ } 
 

Para que su función funcione, debe tener espacios entre el signo del operador .

Por ejemplo:

 #abc{ width: calc(100% - 20px) } 

El artículo de calc () proporciona una explicación más detallada del problema.

Es correcto que IE9 admita CSS calc () y que tenga que poner espacios alrededor de un menos en calc.

Aunque sabía que acababa de tener un problema muy similar con IE9, donde el width: 50% arrojaba un resultado diferente al width: calc(50%) . Resultó que tenía que ver con el tipo de display que se configuró inline-table en inline-table . Cambiarlo a inline-block en inline-block hizo que calc() volviera a funcionar. Tenga en cuenta que http://caniuse.com/#feat=calc marca la compatibilidad con calc() IE9 como “parcial”.