显示表和坏溢出：隐藏在IE和MS边缘

Question

我有border-radius和overflow: hidden上的父元素，以隐藏任何内容溢出。

它不应该是这样的：

它的工作原理无处不在，除了IE和边缘。在这些浏览器，它看起来像这样：

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

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

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

Answer 2

刚刚成立border-radius上.col1和.col2

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