我正在尝试为 <div> 创建功能区覆盖层使用 CSS 和 Bootstrap 的字形图标。我能够毫无问题地构建功能区本身(我认为!)，但是当我尝试放置字形 <i> 时作为功能区文本，我最终得到了一个额外的 <i>元素神奇地插入在每个 <div> 之后在页面上。使用常规文本而不是 <i>按预期工作。
在 Ubuntu 上使用 Chrome 和 Firefox 看到。
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;
}
这里可能发生了什么以及如何解决它？
最佳答案
使用 validator .
<i> 的结束标签不见了。错误恢复关闭并重新打开它，以便您的所有其余内容的每一部分都有一个。
您编写的 XHTML 文档不是 application/xhtml+xml因此你不能使用<foo />作为 <foo></foo> 的替代品.
关于javascript - 什么会导致 Bootstrap 在我的文档中插入额外的元素？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/20766526/