网页设计布局问题（Material Design、AngularJS、Flexbox 等...）答案

【问题标题】：Web design layout issues (Material Design, AngularJS, Flexbox, etc...)网页设计布局问题（Material Design、AngularJS、Flexbox 等...）
【发布时间】：2016-09-20 11:16:42
【问题描述】：

我试图找出为什么响应式网站在 Chrome 中有效，但在 Firefox 中无效。我们正在使用 AngularJS、Material Design、Flexbox 和其他技术。我们有以下页面在 chrome 中完美运行，但在 Firefox 中看起来不同。我不知道这个问题是否与使用“flexboxes”有关。

index.html 是：

index.html == 完美包含所有必需的文件

<body style="background:#B2DFDB;  font-family: 'Amatic SC', cursive;
  font-weight: 700;" flex layout layout-align="center start" ng-controller="DynamicModelController">
    <md-card flex="100" flex-gt-sm="70" layout="column">
        <md-toolbar>
            <div class="md-toolbar-tools">
                <span flex layout="row" layout-align="center center">
                    <h4 ng-model="toolBarTitle.menuTitle" ng-model-options="{ getterSetter: true }">
                        {{menuTitle}}
                    </h4>
                </span>

            </div>
        </md-toolbar>


        <!--ng-view layout="row" layout-align="start end" teal/-->

        <div ui-view style="border:solid 2px red;  ">
            <!-- hierin worden de pagina's geladen -->
        </div>    
    </md-card>
</body>

我们的 app.js 文件使用 Angular UI-View 路由器将页面加载到 index.html 中的<div ui-view" ...></div>。 UI-View 没有问题。我们唯一的问题是页面在 Chrome 中看起来不错，但在 Firefox 中却不行。

加载到 UI 视图中的页面是

沙子.html

<md-content flex layout="column" layout-padding style="background-color:#B2DFDB">   

    <div layout flex layout-align="center center" class="md-padding-20">
        <md-input-container flex>
            <input type="text" ng-model="sandwichName" ng-change="filterSandwich()" placeholder="Search here..." />
        </md-input-container>

        <span style="position:relative;top:2px"ng-show="totalItems > 0">
           <md-button  ui-sref="checkout"  class="md-fab" style="background:teal;"
           ng-click="saveCartToSession()">
            <i class="material-icons" style="line-height:inherit;">shopping_cart</i>

        </md-button></span>
        <label ng-hide="totalItems == 0"><b>{{totPrice}}€</b></label>
    </div>

    <md-grid-list class="gridListdemoBasicUsage"
                  md-cols-xs="2" md-cols-sm="3" md-cols-md="3" md-cols-gt-md="4"
                  md-row-height-gt-md="1:1" md-row-height="2:2"
                  md-gutter="12px" md-gutter-gt-sm="8px" style="background-color:#B2DFDB" >
        <md-grid-tile ng-repeat="sandwich in workingCopy.sandwiches" class="green" ng-click="addItemToCart(sandwich)">


            <md-grid-tile-footer flex>
                <div layout="row" flex>
                    <span style="font-size: large;font-weight: bold;margin-left:15px;">{{sandwich.Name}}</span>
                    <span style="padding:10px;"></span>
                    <span style="font-size: large;font-weight: bold;margin-left:45px;">{{sandwich.Price}}&#8364;</span>
                </div>
            </md-grid-tile-footer>
            <img class="san" src="{{sandwich.ImageUrl}}">
        </md-grid-tile>
    </md-grid-list>
</md-content>

当此页面加载到 index.html 中的<div ui-view> 时，它在 Chrome 中看起来很完美。这是Chrome 中的屏幕截图，但在 Firefox 中看起来不同，这是Firefox 屏幕截图。

在 Firefox 中，您可以看到 index.html 中的 <div ui-view></div> 从未像 Chrome 中那样扩展为包含 sand.html 页面。

我不知道问题是否与 flexbox 或什么有关。

【问题讨论】：

标签： css angularjs flexbox material-design

【解决方案1】：

我在 Safari 浏览器和 IE 上遇到了同样的问题。我遇到的问题是弹性盒。一旦我替换了这些，所有浏览器都可以正常工作。这可能是也可能不是您的情况，但这听起来就像我在项目中遇到的问题。似乎有些浏览器还没有准备好处理 flexbox。

【讨论】：