Fatal编程技术网
  • html/
  • Html ui视图后的空格，但与CSS无关

Html ui视图后的空格，但与CSS无关

html css angularjs

Html ui视图后的空格，但与CSS无关,html,css,angularjs,angular-ui-router,ngroute,Html,Css,Angularjs,Angular Ui Router,Ngroute,好的，这是一个奇怪的。 我之前问过一个问题，但我错认为这是CSS问题，但这似乎与ui路由器/ngRoute有关，因为这是在我切换到ui路由器之前发生的 我遇到了一个关于间距的问题，我把它误认为是儿童保证金问题。 这是我的html： <!DOCTYPE html> <html> <head> <title></title> <script>document.write('<base href="' +

好的，这是一个奇怪的。 我之前问过一个问题，但我错认为这是CSS问题，但这似乎与ui路由器/ngRoute有关，因为这是在我切换到ui路由器之前发生的

我遇到了一个关于间距的问题，我把它误认为是儿童保证金问题。 这是我的html：

 <!DOCTYPE html>
<html>
<head>
    <title></title>

    <script>document.write('<base href="' + document.location + '" />');</script>

    <!-- Keep the scale and disable zoom -->
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0" />

    <link href="content/foundation/normalize.min.css" rel="stylesheet" />
    <link href="content/foundation/foundation.min.css" rel="stylesheet" />
    <link href="content/font-awesome.min.css" rel="stylesheet" />
    <link href="content/animate.min.css" rel="stylesheet" />
    <link href="content/angular-toastr.min.css" rel="stylesheet" />

    <link href="content/core.min.css" rel="stylesheet" />

    <script src="scripts/modernizr-2.8.3.min.js"></script>
</head>
<body ng-app="test" metro>
    <div>
        <nav class="top-bar" role="navigation">
            <ul class="title-area">
                <li class="name">
                    <h1><a ui-sref="home">Test site</a></h1>
                </li>
            </ul>

            <section class="profile right" profile></section>
        </nav>
    </div>

    <section class="page" ui-view></section>

    <script src="scripts/angular.min.js"></script>
    <script src="scripts/angular-cookies.min.js"></script>
    <script src="scripts/angular-ui-router.min.js"></script>
    <script src="scripts/angular-touch.min.js"></script>
    <script src="scripts/angular-resource.min.js"></script>
    <script src="scripts/angular-animate.min.js"></script>
    <script src="scripts/mm-foundation-tpls-0.5.1.js"></script>
    <script src="scripts/angular-toastr.tpls.js"></script>

    <script src="app/app.js"></script>

    <script src="app/common/common.js"></script>
    <script src="app/common/api/handler.js"></script>
    <script src="app/common/models/models.js"></script>
    <script src="app/common/options/options.js"></script>

    <script src="app/components/components.js"></script>
    <script src="app/components/metro/metro.js"></script>
    <script src="app/components/tiles/tiles.js"></script>
    <script src="app/components/profile/profile.js"></script>
    <script src="app/components/draggable/draggable.js"></script>
    <script src="app/components/loadingButton/loadingButton.js"></script>
    <script src="app/components/backgroundSwitcher/backgroundSwitcher.js"></script>

    <script src="app/home/home.js"></script>
    <script src="app/error/error.js"></script>
    <script src="app/account/account.js"></script>
    <script src="app/account/stock/stock.js"></script>
    <script src="app/security/security.js"></script>
    <script src="app/security/profile/profile.js"></script>
    <script src="app/customerServices/customerServices.js"></script>
    <script src="app/customerServices/viewOrder/viewOrder.js"></script>
</body>
</html>
我把所有的css文件都注释掉了，但仍然存在问题。ui视图和子页面之间出现间距问题。 子页面的一个示例如下：

<div class="row slide-in-right">
    <section class="tile-column large-2 columns" id="{{ container.id }}" ng-repeat="container in controller.menu" tile-column>
        <h1 class="column-title">{{ container.name }}</h1>
        <a class="tile box-shadow {{ tile.classes }}" id="{{ tile.id }}" ui-sref="{{ tile.action }}" ng-repeat="tile in container.tiles" coloured-tile="{{ tile.colour }}" tile>
            <i class="fa {{ tile.icon }}"></i>
            <span class="title">{{ tile.name }}</span>
        </a>
    </section>
</div>
我尝试使用chrome开发者工具删除ui视图中除一个div之外的所有HTML，但问题仍然存在。 如果我查看开发工具，我可以看到：

如您所见，突出显示位显示了似乎包含的空间。 如果我编辑HTML，我可以看到：

如果我去掉那个红点，间距问题就消失了。 我不知道是什么引起的。
还有其他人吗？

请设置一个插件，演示该问题可能是右行幻灯片的模板文件，具有UTF-8 BOM。