网页设计布局问题（材料设计，AngularJS，Flexbox等...）

我已经搜索了数小时，试图找出响应网站为什么在Chrome中工作，但不在Firefox中。我们正在使用angularJS，材质设计，Flexbox和其他技术。我们有以下几页，它们在Chrome中完美运行，但在Firefox中看起来不同。我不知道这个问题是否与使用“flexboxes”有关。网页设计布局问题（材料设计，AngularJS，Flexbox等...）

中的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文件使用角度UI，查看路由器页面加载到“在index.html。UI-VIew没有问题，我们遇到的唯一问题是页面在Chrome浏览器中看起来不错，但在Firefox中却看起来不错，

加载到UI视图中的页面是

sand.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，它看起来完美的在Chrome中。以下是chrome中的截图，但在Firefox中看起来不同，这里是firefox截图。

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

我不知道问题是否与柔性盒或什么有关。

有人可以指给我你的正确方向吗？

感谢您的帮助。

来源

2016-05-23 Eddy Freeman

我在Safari浏览器和IE浏览器上遇到了相同的问题。我遇到的问题是柔性盒。一旦我替换了所有浏览器中正常工作的一切。这可能是也可能不是你的情况，但这听起来就像我一直与我的项目有关的问题。似乎有些浏览器尚未准备好处理Flexbox。

来源

2016-05-23 14:14:40 daveskylark

网页设计布局问题（材料设计，AngularJS，Flexbox等...）

回答

相关问题