显示表和坏溢出：隐藏在IE和MS Edge中

Question

我在父元素上有border-radius和overflow: hidden来隐藏任何溢出内部的东西。

看起来应该是这样的：

除IE和Edge外，它可以在任何地方使用。在这些浏览器中，它看起来像这样：

HTML：

<div class="table">
    <div class="col1"></div>
    <div class="col2"></div>
</div>

CSS：

.table {
    border-radius: 10px;
    border: 1px solid black;
    overflow: hidden;
    display: table;
    width: 100%;
}

.col1 {
    background: pink;
    display: table-cell;
    width:50px;
}

.col2 {
    background: orange;
    display: table-cell;
    height: 200px;
}

Answer 1

只需在border-radius和.col1

上设置.col2即可

＆＃13;

＆＃13;

.table {
    border-radius: 10px;
    border: 1px solid black;
    overflow: hidden;
    display: table;
    width: 100%;
}

.col1 {
    background: pink;
    display: table-cell;
    width:50px;
    border-radius: 10px 0px 0px 10px;
}

.col2 {
    background: orange;
    display: table-cell;
    height: 200px;
    border-radius: 0px 10px 10px 0px;
}

＆＃13;

<div class="table">
    <div class="col1"></div>
    <div class="col2"></div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

溢出流有一些问题非块元素。因此，尝试为“.table”添加包装div，并为该包装器应用overflow：hidden。看样品。以下

.table-wrapper{
                border-radius: 30px;
                background: #ccc;
                overflow: hidden;
                display: block;
                width: 200px;
            }
            .table {
                display: table;
                width: 200px;
            }

            .col1 {
                background: rgba(255,0,0,.3);
                display: table-cell;
                width:50px;
            }

            .col2 {
                background: rgba(0,255,0,.2);
                display: table-cell;
                height: 200px;
            }

<div class="table-wrapper">
            <div class="table">
                <div class="col1"></div>
                <div class="col2"></div>
            </div>
        </div>