差异渲染IE和Chrome之间的HTML

时间:2013-10-25 19:24:09

标签: css internet-explorer google-chrome twitter-bootstrap

我在IE9和Chrome之间的渲染html方面存在差异。 我查看了.js和.css的所有网址,并且很好。所有文件都是从官方网站下载的。

这张照片来自IE9 IE9

这张照片来自Chrome This pic is from Chrome

这是我的代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="" />
    <meta name="author" content="" />
    <link rel="shortcut icon" href="public/assets/ico/favicon.png" />

    <title>SMG</title>

    <!-- Bootstrap core CSS -->
    <link href="public/dist/css/bootstrap.css" media="all" rel="stylesheet" type="text/css" />
    <link href="public/dist/css/bootstrap-select.min.css" rel="stylesheet" />


    <!-- Custom styles for this template -->
    <link href="navbar.css" rel="stylesheet" />

    <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
      <script src="public/assets/js/html5shiv.js"></script>
      <script src="public/assets/js/respond.min.js"></script>
    <![endif]-->
  </head>

  <body>

    <div class="container">
<div class="navbar navbar-inverse navbar-fixed-top">
            <div class="container">
                <div class="navbar-header">
                  <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                  </button>
                  <a class="navbar-brand " href="#">SMG</a>
                </div>
                <div class="navbar-collapse collapse">
                    <ul class="nav navbar-nav">
                        <li class="active"><a href="#">Home</a></li>
                    </ul>
                    <form class="navbar-form navbar-right">
                        <div class="form-group">
                            <input type="text" id="dni" data-container=".form-group" data-toggle="popover" data-content="" data-placement="bottom" placeholder="Numero" class="form-control">
                        </div>
                        <div class="form-group">
                            <input type="password" id="password" data-container=".form-group" data-toggle="popover" data-placement="bottom" data-content="Ingrese su Contraseña" placeholder="Password" class="form-control">
                        </div>
                        <div class="form-group">
                            <select class="selectpicker" data-width="200px" title="Tipo de Documentacion" data-style="btn-inverse">
                                    <option data-hidden="true"></option>
                                    <option value="DU">DNI</option>
                                    <option value="LC">LC</option>
                                    <option value="LE">LE</option>
                                    <option value="PA">PA</option>
                            </select>
                        </div>
                        <div class="form-group">
                            <button type="submit" id="signIn" onsubmit="return false;" class="btn btn-success btn-xs">Ingresar</button>
                            <button type="submit" id="signIn" onsubmit="return false;" class="btn btn-danger btn-xs">Registrarse</button>
                        </div>
                    </form>
                </div><!--/.navbar-collapse -->
            </div>
        </div>
        <br/>
        <div class="alert alert-block alert-danger " style="display: none">
            <button type="button" class="close" aria-hidden="true">×</button>
            <h4></h4>
        </div>
          <div class="jumbotron">
      <div class="container">
        <h1>Hello, world!</h1>
        <p>This is a template for a simple marketing or informational website. It includes a large callout called the hero unit and three supporting pieces of content. Use it as a starting point to create something more unique.</p>
        <p><a class="btn btn-primary btn-lg">Learn more &raquo;</a></p>
      </div>
    </div>

    </div> <!-- /container -->

    <script src="public/js/jquery.js"></script>
    <script src="public/dist/js/bootstrap.min.js"></script>
    <script src="public/js/bootstrap-select.min.js"></script>

  </body>
</html>

不知道为什么。任何人都可以帮我一把吗?谢谢!

0 个答案:

没有答案