bootstrap css中的奇怪加号答案

【问题标题】：Strange plus signs in bootstrap cssbootstrap css中的奇怪加号
【发布时间】：2015-09-25 21:57:45
【问题描述】：

在我的 bootstrap css 代码中发生了一些奇怪的事情。我看到了不应该存在的奇怪加号，而且我没有找到任何理由让它们存在。

这是一个示例（您可能需要放大，它们非常小）：

这是html（我几乎没有改动它，因为它出现在view source中，以免消除任何可能导致问题的东西）：

<div align="left" class="col-xs-5 col-sm-7 col-md-7 searchresultbg" style="border:0px solid red; margin-top:10px;">                         
<div class="hidden-xs" style="border:0px solid red;"><br />
                          <a href="http://rover.ebay.com/rover/1/711-53200-19255-0/1?ff3=2&amp;toolid=10044&amp;campid=5337720480&amp;customid=999999999999999&amp;lgeo=1&amp;vectorid=229466&amp;item=121697860181" target="_blank">Strange Dragon  vol.3  Hana to Yume Comics / Manga Comic from Japan</a> <br />
                      </div>
<div class="hidden-sm hidden-md hidden-lg" style="border:0px solid red;"><br />
                          <a href="http://rover.ebay.com/rover/1/711-53200-19255-0/1?ff3=2&amp;toolid=10044&amp;campid=5337720480&amp;customid=999999999999999&amp;lgeo=1&amp;vectorid=229466&amp;item=121697860181" target="_blank">Strange Dragon  vol.3  Hana to Yume Comi [...]</a> <br />
</div>

<div class="hidden-xs" style="border:0px solid red;"><br /></div>

<div style="border:0px solid blue;">
                             Fixed Price<br />
                             Listed: Jul 07 2015 at 11:07AM<br />                                
                             Time Left: 6d 22h 0m<br />
                          </div>                              

                          <!-- site logo -->
<div class="hidden-xs"><br /></div><img src="/app/javax.faces.resource/ebaylogo.png.xhtml?ln=images" class="img-responsive maxwidth70 bottom-buffer10" />                           
</div>

这发生在所有浏览器上。任何想法为什么？

编辑：我对整行使用灰色背景图像。这是css：

.searchresultbg {
    background-image:url('../resources/images/searchresultbg.jpg');
    border-radius: 8px;
}

我检查过，图像一尘不染。

【问题讨论】：

您是否使用任何图像作为“searchresultbg”类或其他类中的灰色背景图像。
如果您可以在 JSFiddle 上重现“错误”，这将有助于我们了解问题所在。
当您检查 + 标志时会发生什么？
@MikePhils，是的，我愿意。我正在用css编辑问题。但我确实检查了图像，加号不存在。
@PraveenKumar 我在检查元素时没有看到任何异常。我怎么知道是否有任何可疑之处？

标签： html css twitter-bootstrap twitter-bootstrap-3

【解决方案1】：

看起来border-radius 是由于四个圆角相交造成的，而不是幻影“+”符号。

删除后会发生什么？

.searchresultbg {
  background-image: url('../resources/images/searchresultbg.jpg');
}

此外，您可以在 JSFiddle 中包含外部 CSS。从菜单中查看 External Resources 选项，或者直接在 CSS 中使用 @import，如下所示：

@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css');

【讨论】：

删除边框半径不会改变任何东西，但是如果我删除背景图像，加号就会消失（我将页面的白色背景更改为其他内容，以便我可以看到它。）图像本身虽然很干净，我仔细检查了。
从您提供的屏幕截图中，肯定看起来像是边界半径问题。您可以尝试在您的 CSS 中添加以下内容作为测试：* { border-radius: 0px !important; }

【解决方案2】：

我的解决方案是使用背景颜色而不是图片。所以这是css：

.searchresultbg {
    /*background-image:url('../resources/images/searchresultbg.jpg');*/
    border-radius: 8px;
}
.container-fluid .searchresultbg{background:#f2f2f2!important;}

愚蠢的加号消失了，一切都很好。

【讨论】：