Question

我有一个我正在跨浏览器测试的网站。在IE（8）和Chrome（版本54.0.2840.87 m）中，加载前需要一些时间，但一旦完成，它就会完全呈现。但是，在Firefox（43.0.1）中，它会在正确呈现之前显示不完整呈现的html元素一秒钟。另外，我在一个按钮上使用了一个Glyph图标，这个图标也不起作用。这是一种不必要的分心和整体次优的用户体验。

这是我的代码：

    <!DOCTYPE html>
<html>
  <head>
    <link href="http://s3.amazonaws.com/codecademy-content/courses/ltp/css/shift.css" rel="stylesheet">
    <link rel="stylesheet" href="http://s3.amazonaws.com/codecademy-content/courses/ltp/css/bootstrap.css">
    <link rel="stylesheet" href="main.css">
  </head>
  <body>
    <div class="jumbotron">
      <div class="container">
        <h1>Site Title</h1>
        <p>Some text describing the site functionality</p>
      </div>
    </div>
</br>
</br>
<div class="form-group">
    <div class="container">
        <label for="url-entered">Name for label</label>
        <div class="input-group">
        <input type="text" class="form-control" id="url-entered" autofocus onFocus="this.select();" onkeyup="onEnterKeyUp(event, this)" placeholder="Some placeholder text here">
        <span class="input-group-btn">
            <button class="btn btn-custom" type="button" onClick="trimURL()"><span class="glyphicon glyphicon-user">Crop it!</span></button>
        </div><!--input-group ends here -->
        <div class="res" id="hidden-res" style="margin-top: 15px; visibility: hidden;">
          <span id="err-msg"></span><a id="trimmed-link"></a>
        </div>        
        </span>
        <p>Mail me at <a href="mailto:admin@site.com">admin@site.com</a></p>
    </div>
</div>
</div>

您能为这些问题提出解决方案吗？谢谢。

Bootstrap网站在完全呈现之前显示 - 雕文图标也不起作用

0 个答案: