Question

我正在尝试使用一个非常简单的角度材料卡来显示标题和一些文字。我在https://material.angularjs.org/latest/demo/card使用了演示代码的逐字副本，但我似乎无法在chrome中正确渲染它。如果我将演示代码删除到最低限度，我有

<html lang="en">
<head>
    <!-- Angular Material style sheet -->
    <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/angular_material/1.0.3/angular-material.min.css">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,400italic">
</head>
<body ng-app="BlankApp" ng-cloak>
    <md-card>
        <md-card-title>
            <md-card-title-text>
                <span class="md-headline">Icon action buttons</span>
            </md-card-title-text>
        </md-card-title>
        <md-card-content>
            <p>
                The titles of Washed Out's breakthrough song and the first single from Paracosm share the
                two most important words in Ernest Greene's musical language: feel it. It's a simple request, as well...
            </p>
        </md-card-content>
    </md-card>

    <!-- Angular Material requires Angular.js Libraries -->
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.min.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-aria.min.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-messages.min.js"></script>

    <!-- Angular Material Library -->
    <script src="http://ajax.googleapis.com/ajax/libs/angular_material/1.0.3/angular-material.min.js"></script>

    <!-- Your application bootstrap  -->
    <script type="text/javascript">    
        /**
        * You must include the dependency on 'ngMaterial' 
        */
        angular.module('BlankApp', ['ngMaterial']);
    </script>
</body>

在chrome中给出的结果如下所示：

正确的结果应如下所示（在firefox开发人员版中显示）：

或类似于演示页面（也适用于chrome）：

我注意到的一些事情：

检查chrome dev工具中的元素时，<md-card-title>的高度为0 - 内容流出框的底部
如果我从flex: 1移除<md-card-title>

有没有人知道为什么会这样？

Answer 1

这已经破了。 Angular Material Version 1.1.1。 Chrome版本52和53。

那支钢笔有效，但是复制/粘贴笔在空的镀铬标签上的内胆并不起作用，它显示了上面的相同问题，这也发生在我的应用上。

@ cakez0r，将其添加到您的CSS：

md-card-title { flex: initial!important; }

那就是诀窍

Answer 2

尝试：将16px更改为30px

open

角度材料简单的卡片标题在chrome中没有正确调整大小

2 个答案: