显示 table 和错误溢出：隐藏在 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

只需在 .col1 和 .col2

上设置 border-radius

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

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

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>

显示 table 和错误溢出：隐藏在 IE 和 MS Edge 中

display table and bad overflow: hidden in IE and MS Edge

html

css

internet-explorer

microsoft-edge