IE有时会显示表格行边框

Question

在IE 11中，表格行显示白色边框，即使它有border: none;此问题在firefox和chrome上也不会出现。

JSFiddle link

IE中的图片：

Chrome中的图片

在玩完代码之后，我发现圆角导致了这个问题。

table.striped > tbody > tr > td:first-child {
  border-radius: 10px 0 0 10px;
}
table.striped > tbody > tr > td:last-child {
  border-radius: 0 10px 10px 0;
}

Answer 1

IE 无法采取＆＃34; 边框＆＃34;当您使用＆＃34; border_radius ＆＃34;时。有了这个＆＃34; CSS＆＃34;，这个问题在＆＃34; IE ＆＃34;

中解决了

table.striped>tbody>tr:nth-child(odd) > td
{
  border-left: solid 1em #F2F2F2!important;
}

table.striped > tbody > tr > td.failed
{
  border-left: solid 1em #FF4359!important;
}

table.striped>tbody>tr:nth-child(even) > td,
table.striped > tbody > tr > td:first-child
{
  border-left: none!important;
}

＆＃13;

＆＃13;

@import 'https://fonts.googleapis.com/icon?family=Material+Icons';
.searchbox {
  width: 0% !important;
}
.searchbox.open {
  width:45% !important;
  padding-left: 10px !important;
}
.searchicon {
  cursor: pointer;
}
.failed {
    background-color: #ff4359;
    color: white;
}
.pad-l-15 {
    padding-left: 15px;
}

body {
  background-color: #F3F3F2;
}

table.striped > tbody > tr > td:first-child {
  border-radius: 10px 0 0 10px;
}

table.striped > tbody > tr > td:last-child {
  border-radius: 0 10px 10px 0;
}

#listcount {
  font-size: 18px;
  color: #727d93;
}

.icons {
  margin-left: auto;
  padding: 5px;
}

.card .card-content .card-title {
  display: flex;
  align-items: center;
}
    table.striped>tbody>tr:nth-child(odd) > td
    {
      border-left: solid 1em #F2F2F2!important;
    }
    table.striped > tbody > tr > td.failed
    {
      border-left: solid 1em #FF4359!important;
    }
      table.striped>tbody>tr:nth-child(even) > td,
      table.striped > tbody > tr > td:first-child
    {
      border-left: none!important;
    }

＆＃13;

<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.99.0/css/materialize.min.css" rel="stylesheet"/>
<div class="row">
   <div class="col s12 m6">
      <div class="card">
         <div class="card-content">
            <span class="card-title">
              <i class="material-icons">business_center</i>
                My List
              <span id="listcount">
                (12)
              </span>
              <div class="icons">
                 
                <span class="new badge yellow" data-badge-caption="">
                  1
                </span>
                
              </div>
              <input id="fund-search" type="search" class="searchbox" placeholder="Search">
               					<i class="material-icons right searchicon" ng-click="toggleSearch()">search</i>
				           
            </span>
            
            <div class="">
               <table class="table striped table-hover table-curved" ng-controller="Hello">
                  <tbody>
                     <tr>
                        <td class="pad-l-15"><b>12345</b></td>
                        <td>Random Text @</td>
                        <td><b>300121</b></td>
                     </tr>
                     <tr>
                        <td class="failed pad-l-15"><b>12345678</b></td>
                        <td class="failed">Random Text @</td>
                        <td class="failed"><b>300121</b></td>
                     </tr>
                     <tr>
                        <td class="pad-l-15"><b>123</b></td>
                        <td>Random Text @</td>
                        <td><b>300121</b></td>
                     </tr>
                     <tr>
                        <td class="pad-l-15"><b>123</b></td>
                        <td>Random Text @</td>
                        <td><b>300121</b></td>
                     </tr>
                     <tr>
                        <td class="pad-l-15"><b>123</b></td>
                        <td>Random Text @</td>
                        <td><b>300121</b></td>
                     </tr>
                     <tr>
                        <td class="pad-l-15"><b>123</b></td>
                        <td>Random Text @</td>
                        <td><b>300121</b></td>
                     </tr>
                  </tbody>
               </table>
            </div>
         </div>
      </div>
   </div>
   <div class="col s12 m6">
      <div class="card">
         <div class="card-content">
            <span class="card-title">My Right List
            <span class="new badge red" data-badge-caption="">4</span>
            </span>
            <div class="table-responsive">
               <table class="table striped table-hover table-curved" ng-controller="Hello">
                  <tbody>
                     <tr>
                        <td><b>12345</b></td>
                        <td>Random Text @</td>
                        <td><b>300121</b></td>
                     </tr>
                     <tr>
                        <td><b>12345678</b></td>
                        <td>Random Text @</td>
                        <td><b>300121</b></td>
                     </tr>
                  </tbody>
               </table>
            </div>
         </div>
      </div>
      <div class="row">
         <div class="col s12 m6">
            <div class="card">
               <div class="card-content">
                  <span class="card-title">Nested left</span>
               </div>
            </div>
         </div>
         <div class="col s12 m6">
            <div class="card">
               <div class="card-content">
                  <span class="card-title">Nested right</span>
               </div>
            </div>
         </div>
      </div>
   </div>
</div>

＆＃13;

＆＃13;

＆＃13;