HTML通过元素呈现未定义的行？

Question

以下code生成3个带有glyphicon图标，文本和标题的框。 （注意：使用JSFiddle，您需要在中等大小的括号中显示窗口以生成正确的布局）。这些都是响应式并使用引导框架。当我预览结果时，我有时会在字形下面找到一条线。是什么造成的？我在Google Chrome和Microsoft Edge中都能看到它，但有时当我放大时，它会消失，然后如果我放大更多，它会重新出现？其他时候，当我加载相同的文件时，它不会显示。

scikits

css：

  <div class="row Page2">
    <div class="col-sm-2 margin"></div>
    <div class="col-sm-2 col-xs-2">
      <div class="glyphicon-ring"> <span class="glyphicon glyphicon-bullhorn glyphicon-bordered"></span>
      </div>

    </div>
    <div class="col-sm-1 margin"></div>
    <div class="col-sm-2 col-xs-2">
      <div class="glyphicon-ring"> <span class="glyphicon glyphicon-ok glyphicon-bordered"></span>

      </div>
    </div>
    <div class="col-sm-1 margin"></div>
    <div class="col-sm-2 col-xs-2">
      <div class="glyphicon-ring"> <span class="glyphicon glyphicon-phone glyphicon-bordered"></span>

      </div>
    </div>
    <div class="col-sm-2 margin"></div>
    <div class="col-sm-2 margin"></div>

    <div class="col-sm-2">
      <div class="box">
        <div class="row">
          <div class="col-xs-6 col-sm-12">
            <h3><strong>Simple</strong></h3>
          </div>
          <div class="col-xs-6 col-sm-12 eqheight1">
            <p class>Text.</p>
          </div>
        </div>
      </div>
    </div>

任何想法，或者我知道如何进一步测试？