tamaño - ¿Por qué la función calc() de CSS no me funciona?

redimensionar texto css

Question

Aprendí sobre la función CSS calc () y su impresionante. Traté de usarlo como:

#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?

Answer 1

Con la última versión de Modernizr puedes verificar el soporte de csscalc. Simplemente use Modernizr.csscalc . Esta función devolverá verdadero si es compatible y falso 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 estilizar sus elementos con nombres de clase en lugar de ID. El ID de un elemento solo debe usarse para apuntarlo a través de javascript .

Answer 2

El operador “-” debe estar rodeado de espacios:

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

Citando información 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 declaración formal sobre esto se encuentra en la cláusula 8.1.1 del Módulo de Valores y Unidades de CSS, Nivel 3 CR.

Answer 3

En primer lugar, debe haber espacios antes y después de + o - . También puedes 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 */
}

<div class="gen nocalc"></div>
<div class="gen calc"></div>

Funciona con display: table , pero no funciona con display: table-row (la fila ocupa todo el espacio) y no funciona con display: table-cell (si una celda ocupa todo el espacio; si hay varias, cada celda ocupa un espacio Según su contenido ).

.cont-1 {
  background-color: yellow;
}

.cont-2 {
 background-color: red;
 border: solid 1px black;
}

.width-m-50 {
  width: calc(100% - 20px);
  height: 100px;
}

.tab-simple {
  display: table;
}

.tab {
  display: table;
  border: solid 1px black;
  background-color: yellow;
  width: 100%;
}

.tab-row {
  display: table-row;
}

.tab-cell {
  display: table-cell;
}

<div class="cont-1"> 
  <div class="cont-2 width-m-50"> 
    div with width: calc(100% - 20px);
  </div>
</div>

<div class="cont-1"> 
  <div class="cont-2 tab-simple width-m-50"> 
    tab with width: calc(100% - 20px);
  </div>
</div>
<h3> tab with width 100% and two cells, 1-st with width calc(100% - 20px); 2-nd without: </h3>
<div class="tab">
  <div class="tab-row"> 
      <div class="cont-2 tab-cell width-m-50"> 
        cell
      </div>
      <div class="cont-2 tab-cell"> 
        cell 
      </div>
  </div>
</div>

Answer 4

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

Answer 5

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

Aunque sabiendo que acabo de tener un problema muy similar con IE9, donde el width: 50% produjo un resultado diferente al width: calc(50%) . Resultó que tenía que ver con el tipo de display que se configuraba inline-table en inline-table . Cambiarlo a inline-block hizo que calc() vuelva a funcionar. Tenga en cuenta que http://caniuse.com/#feat=calc marca el soporte de calc() IE9 como "parcial".

Answer 6

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

Puede solucionar este problema envolviendo un div a su alrededor (que es display: block ) y haciendo el ancho de la display: table elemento de display: table dentro del width: 100% . Se aplica el ancho de calc d al div circundante.

Answer 7

Necesita espacios y también si utiliza el formato del preprocesador como este calc(~"100% - 20px") o puede que no funcione.

Answer 8

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

Por ejemplo:

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

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

Answer 9

Todos los navegadores modernos, excepto el navegador nativo de Android, admiten calc() lo que facilita su adopción. Pero tenga en cuenta que puede tener un gran impacto en el diseño y la consiguiente ruptura de su diseño en navegadores no compatibles.

Debe usarlo con una declaración de respaldo, 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 **/