Question

我正在尝试使用CSS和Bootstrap的glyphicons为<div>创建一个功能区覆盖。我能够毫无问题地构建功能区（我想！），但当我尝试将字形<i>作为功能区文本放置时，我最终会添加一个额外的<i>元素。在页面上的每个<div>之后。使用常规文本而不是<i>按预期工作。

enter image description here

使用Chrome和Firefox浏览Ubuntu。

JSFiddle：http://jsfiddle.net/57Wbd/3/

<body>
  <div class="box">
    <div class="ribbon">
      <div class="txt">
          <i class="glyphicon glyphicon-exclamation-sign"/>
      </div>
    </div>
  </div>
</body>

.box {
    position: relative;
    background-color: #808080;
    width: 355px;
    height: 132px;
}
.ribbon {
  -webkit-transform: rotate(45deg);
     -moz-transform: rotate(45deg);
      -ms-transform: rotate(45deg);
       -o-transform: rotate(45deg);
          transform: rotate(45deg);
    border: 48px solid transparent;
    border-bottom: 48px solid #ffe500;
    position: absolute;
    top: -32px;
    right: -72px;
    width: 192px;
    color: white;
}
.ribbon .txt {
    position: absolute;
    top: 16px;
}

这里可能会发生什么，我该如何解决？

Answer 1

使用validator。

您的<i>的结束标记丢失了。错误恢复关闭并重新打开，以便您在其余所有内容的每一部分周围都有一个。

您没有撰写作为application/xhtml+xml的XHTML文档，因此您无法使用<foo />替代<foo></foo>。

（和you shouldn't use an <i> for that anyway）。

什么会导致Bootstrap在我的文档中插入额外的元素？

1 个答案: