網頁設計佈局問題（材料設計，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等...）

回答

相關問題