Question

空格出现在border-radius大于0的元素周围，但仅限于IE。

使用border-top-left-radius: 20px; border-top-right-radius: 20px;：

*没有border-radius：

守则：

.price-head {
  color: #fff;
  margin: 0;
  height: 109px;
}
.btop {
  background: #8ebded;
}
.bbot {
  background-color: #4096ee;
  height: 80px;
  position:relative;
}
.bbot:after {
  content:'';
  position: absolute;
  top: 100%;
  left: 63%;
  margin-left: -50px;
  width: 0;
  height: 0;
  border-top: solid 20px #4096ee;
  border-left: solid 20px transparent;
  border-right: solid 20px transparent;
  z-index: 10;
}

<head>
    <link href="css/normalize.css" rel="stylesheet">
<!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">

    <!-- Optional theme -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">
</head>
<body>
<div class="row" style="margin: 0;">
  <div class="row text-center" style="margin: 0;">
    <div class="col-md-2" style="margin: 0;"></div>
    <div class="col-md-10" style="margin: 0; padding: 0;">
      <div class="col-md-3 price-head btop" style="border-top-left-radius: 20px;">
        <h1 style="padding-top: 15px;"><strong>Sole Trader</strong></h1>
      </div>
      <div class="col-md-3 price-head btop">
        <h1><strong>Small Business</strong></h1>
      </div>
      <div class="col-md-3 price-head btop">
        <h1 style="padding-top: 15px;"><strong>SME</strong></h1>
      </div>
      <div class="col-md-3 price-head btop" style="border-top-right-radius: 20px;">
        <h1 style="padding-top: 15px;"><strong>Contractor</strong></h1>
      </div>
    </div>
  </div>
  <div class="row text-center" style="margin: 0;">
    <div class="col-md-2" style="margin: 0;">
      <h3>Choose Plan</h3>
    </div>
    <div class="col-md-10" style="margin: 0; padding: 0;">
      <div class="col-md-3 price-head bbot">
        <h1>£</h1>
      </div>
      <div class="col-md-3 price-head bbot">
        <h1>££</h1>
      </div>
      <div class="col-md-3 price-head bbot">
        <h1>£££</h1>
      </div>
      <div class="col-md-3 price-head bbot">
        <h1>££££</h1>
      </div>
    </div>
  </div>
</div>
</body>

提前致谢。

Answer 1

你试过吗

.col-md-3 { border-width:0 !important; }

border-radius在元素之间添加空格（IE11）

1 个答案: