顯示錶和壞溢出：隱藏在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>