角度材料簡單的卡片標題在chrome中沒有正確調整大小

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 - 內容流出框的底部
如果我從<md-card-title>刪除flex: 1 ，我可以在chrome中獲得正確的結果

有沒有人有任何想法為什么會這樣？

Answer 1

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

該筆工作，但復制/粘貼筆在空的鉻標簽中的內部功能不起作用，它顯示上述相同的問題，這也發生在我的應用程序上。

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

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

那就行了

Answer 2

嘗試：將16px更改為30px

md-card md-card-title {
    padding: 24px 16px 30px;
}

角度材料簡單的卡片標題在chrome中沒有正確調整大小

問題描述

2 個解決方案

解決方案1
1 2016-09-14 00:26:37

解決方案2
-1 2016-02-01 08:51:59

角度材料簡單的卡片標題在chrome中沒有正確調整大小

問題描述

2 個解決方案

解決方案1 1 2016-09-14 00:26:37

解決方案2 -1 2016-02-01 08:51:59

解決方案1
1 2016-09-14 00:26:37

解決方案2
-1 2016-02-01 08:51:59