Border element with display: the table goes beyond the parent

Question

This code seems to have different effects in every 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>

Run code

In Chrome 43.0, a table is not limited to a container:

In Safari 5.1, the border completely overlaps the table, since it interprets the width as the width of the border:

In Firefox 38.0 and Internet Explorer 11.0, the table displays correctly:

Ideally, all browsers behave like Firefox / Internet Explorer.

Using box-sizing: border-boxand increasing the width .boxto include the width of the border, all browsers display the version of Firefox / Internet Explorer, but assuming the border width is unknown, is there a way to make all major browsers display the model according to Firefox / Internet Explorer (without using JavaScript)?

:

• table-layout: fixed .box.
• border-collapse: separate .box
• box-sizing: content-box .box
• <table> display: table ( Chrome , Safari, .)

_{, , Chrome : border-box : , . >}

---

:

, . , <div> display: table, , ( ) . div . div , . - , , div .

Answer 1

box-sizing: border-box .box, .box, border-width

:

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

, , , .container .box, default value box-sizing - content-box, .

,

display: table-cell .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>

Answer 2

. width: 20px