我是 AngularJS Material Design 的新手，我对 Mac Safari 中的一个问题感到震惊。我有一个对话框要显示给用户，该对话框在除 Mac Safari 之外的所有浏览器中都没有任何问题。
它如何在其他浏览器中显示
它是如何在 Mac Safari 中显示的
我试图通过提供一些解决方法来解决这个问题，比如“flex-shrink:0”“flex-basis:auto;”但似乎没有任何效果。
这是我的代码的微型版本或使用 code pen .任何帮助或建议都非常感谢。
main.html
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/angular-material/1.1.4/angular-material.min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular-animate.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular-aria.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular-messages.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular-route.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-material/1.1.4/angular-material.min.js"></script>
<style>
.flexfix {
flex-shrink: 0;
flex-basis: auto;
}
</style>
<script>
var dialogApp = angular.module('latestDialogApp', ['ngMaterial']);
dialogApp.controller('AppController', function ($scope, $mdDialog) {
$scope.TestString = "App Has been initialted";
$scope.showCustomDialog = function () {
$mdDialog.show({
templateUrl: 'login.dialog.2.html',
parent: angular.element(document.body),
clickOutsideToClose: true,
});
};
});
</script>
</head>
<body ng-app="latestDialogApp" ng-controller="AppController">
<div layout="column" layout-fill layout-align="center center">
<div layout="row" layout-align="center center">
{{TestString}}
</div>
<div layout="row" layout-align="center center">
<md-button class="md-raised md-warn" ng-click="showCustomDialog()" type="button">Show Dialog</md-button>
</div>
</div>
</body>
</html>
login.dialog.2.html
<md-dialog class="flexfix">
<form ng-cloak class="flexfix">
<md-toolbar>
<div layout="row" layout-align="space-between center" flex="100" layout-fill class="md-toolbar-tools">
<md-button class="md-raised md-warn custom-back-Btn">Back</md-button>
</div>
</md-toolbar>
<md-dialog-content class="flexfix">
<div layout="column" class="flexfix">
<div layout="row" layout-align="center center" class="flexfix">
<h3>Login Dialog</h3>
</div>
<div layout="row" layout-fill layout-margin class="flexfix">
<md-input-container class="md-block" layout-xl="column">
<label>Email</label>
<input name="username" ng-model="dialog.username" md-autofocus required />
</md-input-container>
</div>
<div layout="row" layout-fill layout-margin class="flexfix">
<md-input-container class="md-block" layout-xl="column">
<label>Password</label>
<input type="password" name="password" ng-model="dialog.password" required />
</md-input-container>
</div>
</div>
</md-dialog-content>
<md-dialog-actions layout="column" class="flexfix">
<div layout="row" flex="100" layout-fill layout-margin class="flexfix">
<md-button class="md-raised md-warn" layout-fill>Login</md-button>
</div>
<div layout="row" layout-fill layout-margin layout-align="center center" class="flexfix">
<label>OR</label>
</div>
<div layout="row" layout-fill layout-margin class="flexfix">
<md-button class="md-raised md-primary" layout-fill>Login Option 2</md-button>
</div>
<div layout="row" layout-fill layout-margin class="flexfix">
<md-button class="md-raised md-primary" layout-fill>Login Option 3</md-button>
</div>
<div layout="row" layout-fill layout-margin layout-align="center center" class="flexfix">
<a href="" class="md-primary custom-center-margin"> I Forgot My Password </a>
</div>
<div layout="row" layout-fill layout-margin layout-align="center center" class="flexfix">
<h6>About Us</h6>
<h6>Terms</h6>
</div>
</md-dialog-actions>
</form>
</md-dialog>
最佳答案
尝试添加此 css
.flex { flex : 1 1 0%; }
和
-webkit-box-direction: normal;
-webkit-box-orient: vertical;
您还可以点击此链接
https://github.com/angular/material/issues/1720
关于AngularJS Material 对话框在 Mac Safari 中无法正确显示，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/43869660/