3

i'm quite perplexed by a IE9 specific issue I have at the moment, wondering if i'm doing anything wrong or whether anyone has encountered this before.

It seems if I use calc() + display: table; on an element IE9 can't handle it?

I've put it in a JS Bin here: http://jsbin.com/himuhume/1/

Or, reproduction steps are:

HTML

<div class="container">
    <div class="inside">
    </div>
    <span>Calc without display works</span>
  </div>
  <div class="container">
    <div class="inside break">
    </div>
    <span>Calc display table does not</span>
  </div>

CSS

body {
background-color: grey;
  font-family: Arial;
  font-size: 12px;
}

.container {
width: 100px;
  height: 100px;
  background-color: white;
  margin: 50px;
}

.inside {
  width: calc(90% + 10px);
  height: 20px;
  background-color: black;
}

.break {
    display: table;
}

Any ideas would be appreciated, cheers :)

tbodt
  • 16,609
  • 6
  • 58
  • 83
csilk
  • 2,732
  • 3
  • 23
  • 40
  • It looks like calc() only has partial support in IE9. That might have something to do with it. http://caniuse.com/#search=calc – Matt Whitehead Apr 01 '14 at 03:44
  • I can't seem to find anything detailing what "partial" support means, looking through the docs the only thing i've found is surrounding the whitespace needed surrounding the operand – csilk Apr 01 '14 at 04:05
  • Yeah, I'm not sure what partial support means either. You might of discovered a random bug. After a quick Google search for display table alternative, I found this answer: http://stackoverflow.com/questions/8605276/css-divs-displaytable-alternative – Matt Whitehead Apr 01 '14 at 04:16
  • Unfortunately I need display: table-cell support, may have to throw another node in there to do the calc and have the table display 100% of the calc'd container. Thanks for trying to help though, really appreciate it :) – csilk Apr 01 '14 at 04:56
  • To see the _Partial Support_ explanation click on the _Known Issues_ tab. I cannot see anything in the _Known Issues_ that might be the cause of your problem though! – andyb Apr 01 '14 at 14:56

1 Answers1

3

I confirm that the bug exists, IE9 doesn't apply calc() width on DIVs with display:table. Possible workarounds are:

  1. adding a node outside the display:table DIV, applying the calc() width to it and applying 100% width to the display:table DIV.
  2. floating the contents instead of using display:table
Paolo Mioni
  • 1,008
  • 10
  • 17