Why doesn't the calc () CSS function work for me?

Question

I learned about the calc calc () function and its awesome. I tried using it like:

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

But the problem with this function is that it does not work. I tested this code with IE9 and Safari and it did not work.

Why doesn't it work?

Answer 1

The "-" operator must be surrounded by spaces:

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

Quote MDN information on calc() : "Note: The + and - operators must always be surrounded by spaces. The calc operand (50% -8px) for example, will be parsed as a percentage, followed by a negative length, an invalid expression, while the calc operand (50% - 8px) is the percentage followed by a minus sign and a length. "

The formal statement in this is expressed in section 8.1.1 of the CSS module of values ​​and blocks of the 3rd level CR.

Answer 2

All modern browsers, except for browser support for Android, calc() , which simplifies adoption. But note that this can greatly affect the layout and subsequent violation of your design on unsupported browsers.

You must use it with a return declaration, so it does not break browsers that do not support it.

 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 **/ 

Answer 3

IE9, IE10 and Safari 6.0 are supported (using the -webkit- prefix). You can check the entire support table here: http://caniuse.com/#feat=calc

Answer 4

The IE9 implementation of the calc() method does not work with display: table elements.

You can get around this by wrapping the div around it (this is display: block ) and making the width of the display: table element inside width: 100% . You apply the width of calc d to the surrounding div .

Answer 5

With the latest version of Modernizr, you can check csscalc support. Just use Modernizr.csscalc. This function will return true if it is supported, and false if it is not. In your case, you will have this in your css:

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

and in your javascript (here i am using jQuery)

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

BTW. It’s better to style your elements with class names rather than identifiers. The item id should only be used to target it through javascript.

Answer 6

You need spaces, and also if you use the preprocessor format, it looks like calc(~"100% - 20px") or may not work.

Answer 7

Like the fact that IE9 supports CSS calc () and that you should put spaces in minus in calc.

Although I know that I had a very similar problem with IE9, where width: 50% gave a different result than width: calc(50%) . It turned out that this is due to the type of display , which was installed in the inline-table . Changing it to inline-block , made calc() works again. Please note that http://caniuse.com/#feat=calc marks IE9 calc() support as "partial".

Answer 8

First of all, there must be spaces before and after + or - . You can also use * , / and combine them. Example:

 .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> 

It works with display: table , but does not work with display: table-row (a row occupies all the space) and does not work with display: table-cell (if one cell requires a whole space, if several - each cell takes up space in accordance with its contents )

 .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>