html - Bordered element with display:table extends out of parent -

this code seems have different effect in each browser.

.container {      display: inline-block;      border: 1px solid black;      padding-top: 5px;      padding-bottom: 5px;  }  .box {      display: table;      width: 10px;      height: 10px;      background-color: red;      border: 5px solid blue;  }

<div class="container">      <div class="box"></div>  </div>

in chrome 43.0, table not confined container:

in safari 5.1, border overlaps table because seems interpret width inclusive of border width:

in firefox 38.0 , internet explorer 11.0, table renders correctly:

the ideal browsers behave similar firefox/internet explorer.

using box-sizing: border-box , increasing width of .box include width of border makes browsers show firefox/internet explorer version, assuming width of border unknown, there way make major browsers render model according firefox/internet explorer (without using javascript)?

the following doesn't @ all:

• using table-layout: fixed on .box.
• using border-collapse: separate on .box
• using box-sizing: content-box on .box
• using <table> instead of display: table (this makes chrome's preview same safari's , prefer not use table element.)

_{this issue seems similar chrome vs. box-sizing:border-box in display:table, problem fixed.}

---

just frame of reference:

that minimal example demonstrating same problem. actual issue have <div> display: table have width defined width of cells (which equal height of cells) , padding between them. div happens have border. div contained element floated right. however, because of problem, when floated container on right, div overflows off screen.

set box-sizing: border-box .box , give size .box taking in count border-width

like this:

.container {      display: inline-block;      border: 1px solid black;      padding-top: 5px;      padding-bottom: 5px;  }  .box {      display: table;      width: 20px;      height: 20px;      background-color: red;      border: 5px solid blue;      box-sizing:border-box;  }

<div class="container">      <div class="box"></div>  </div>

the behavior have because .container adjusting content of .box , default value of box-sizing content-box border being left out.

added solution because above solution requires border width known beforehand

trying set display: table-cell content inside of .box

.container {      display: inline-block;      border: 1px solid black;      padding-top: 5px;      padding-bottom: 5px;  }  .box {      display: table;      border: 5px solid blue;  }    .cell {      display: table-cell;      width: 10px;      height: 10px;      background-color: red;  }

<div class="container">      <div class="box">          <div class="cell"></div>      </div>  </div>