边界半径在元素之间添加空间（IE11）答案

【问题标题】：border-radius adds space between elements (IE11)边界半径在元素之间添加空间（IE11）
【发布时间】：2017-05-09 07:33:22
【问题描述】：

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>

提前致谢。

【问题讨论】：

您是否尝试过将 bbot:after 的透明边框更改为 #4096ee？
bbot:after 是关于标题底部的蓝色小三角形。去除透明度会使三角形变成正方形，并且对带有空格的元素没有影响。
抱歉，我有一个金发碧眼的时刻。根据我的阅读，解决方案可以是在元素周围添加边框，您的问题是您有渐变背景。

标签： html css twitter-bootstrap-3 internet-explorer-11

【解决方案1】：

你试过了吗

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

【讨论】：