title: calc(xx% - yypx) isn't working, and I didn't forget the spaces
body: <p>I have the following css:</p>
  
  <pre><code>#elementid {
    width: -webkit-calc(100% - 30px);
    width: -moz-calc(100% - 30px);
    width: -o-calc(100% - 30px);
    width: calc(100% - 30px);
  }
  </code></pre>
  
  <p>The element renders narrower than expected . In Chrome, if I inspect the element, it shows:</p>
  
  <pre><code>width: -webkit-calc(70%);
  width: -moz-calc(70%);
  width: -o-calc(70%);
  width: calc(70%);
  </code></pre>
  
  <p>So it's apparently interpreted the 'px' as % instead.</p>
  
  <p>But if I enter the exact same CSS inline on the element, in Chrome dev tools:</p>
  
  <pre><code>width: calc(100% - 30px);
  </code></pre>
  
  <p>... then it renders as I expect.</p>
  
  <p>As you can see I added spaces around the operator properly, so that's not it.</p>
  
  <p>Why would the browser interpret it as "calc(70%)" when rendering the page, but not when I change the CSS inline using dev tools?</p>