个人中心
gpt4 book ai didi

html - Angular Material 简单的卡片标题在 chrome 中大小不正确

转载 作者：太空宇宙 更新时间：2023-11-04 13:09:41 24 4
gpt4 key购买 nike

我正在尝试制作一个非常简单的 Angular Material 卡片来显示标题和一些文本。我在 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 中给出了这样的结果:

enter image description here

正确的结果应该如下所示(在 firefox 开发者版中显示):

enter image description here

或者演示页面上的类似内容(也适用于 chrome):

enter image description here

我注意到的一些事情:

  • 在 chrome 开发工具中检查元素时，<md-card-title>高度为 0 - 内容从盒子底部流出
  • 如果删除 flex: 1，我可以在 chrome 中得到正确的结果来自 <md-card-title>

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

最佳答案

这个坏了。 Angular Material 版本 1.1.1。 Chrome 版本 52 和 53。

那支笔可以用，但是将那支笔的内部内容复制/粘贴到一个空的 chrome 选项卡中不起作用，它显示了上面同样的问题，这也发生在我的应用程序上。

@cakez0r，将其添加到您的 CSS 中:


md-卡片标题{
flex :初始!重要；
}

这样就可以了

关于html - Angular Material 简单的卡片标题在 chrome 中大小不正确，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/35028680/

24 4 0
文章推荐： java - 检测用户输入的单词是否与Java中数组列表中的字符串匹配
文章推荐： java - 二维数组的 CopyOfRange
文章推荐： java - 从数组中删除从键盘输入读取的特定元素
文章推荐： java - EclipseLink:实体的 key 映射，其中实体的 PK 是映射中的 key
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com