我想找出为什么响应式网站在 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 路由器将页面加载到 <div ui-view" ...></div>在 index.html 中。 UI-View 没有问题。我们遇到的唯一问题是这些页面在 Chrome 中看起来不错，但在 Firefox 中却不好看。
加载到UI View 中的页面是
沙.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}}€</span>
</div>
</md-grid-tile-footer>
<img class="san" src="{{sandwich.ImageUrl}}">
</md-grid-tile>
</md-grid-list>
</md-content>
当此页面加载到 <div ui-view> 时在 index.html 中，它在 Chrome 中看起来很完美。这是Chrome中的截图但在 Firefox 中看起来不同，这里是 Firefox截图。
在 Firefox 中你可以看到 <div ui-view></div>在 index.html 中从未像在 Chrome 中那样扩展以包含 sand.html 页面。
我不知道这个问题是与 flexboxes 还是什么有关。
最佳答案
我在 Safari 浏览器和 IE 上都遇到过同样的问题。我遇到的问题是 flexboxes。一旦我替换了那些，所有浏览器都可以正常工作。这可能是也可能不是你的情况，但这听起来就像我在元素中遇到的问题。似乎有些浏览器还没有准备好处理 flexbox 。
关于css - 网页设计布局问题(Material Design、AngularJS、Flexbox 等...)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/37393293/