Angular 7 PrimeNg 日历日期在 Firefox 中悬停时消失答案

【问题标题】：Angular 7 PrimeNg Calendar dates disappear on hover in FirefoxAngular 7 PrimeNg 日历日期在 Firefox 中悬停时消失
【发布时间】：2019-10-20 09:06:26
【问题描述】：

我正在实施 PrimeNg 日历。当我把它放在页面上时，没有我们的任何样式和特殊格式，它工作正常。当我将它与我们需要的所有其他选项一起放在页面上时，日历日期等会消失然后重新出现。

我已经尝试了 HOURS 小时，将其简化为基础，但无法弄清楚导致问题的原因。我已经尝试从元素中删除宽度样式并且日历看起来很好，但我们需要这些。

我为这个问题创建了一个堆栈闪电战，并复制了它。这只是 Firefox 中的问题，Chrome 中没有。我知道 CSS 没有完全应用，而且看起来很乱，但它复制了这个问题。 https://stackblitz.com/edit/angular6-primeng-b51scg

我希望这些日期和日历的其他元素不会消失。这一定是 Firefox 有问题的地方。

【问题讨论】：

要添加的东西：您正在尝试的 firebox 版本
“我把它和我们需要的所有其他选项一起放在页面上”这些选项是什么仅供参考我看到你导入了 jquery ......这在 Angular 世界中是一个很大的禁忌。你不应该在 Angular 中使用 jQuery。这是不好的做法

标签： angular flexbox primeng

【解决方案1】：

您添加的 css 破坏了日历（当您将鼠标悬停在某个日期上时）

span {
    &.ui-calendar {
        display: inline; //this line is breaking your code
        button {
          ....
        }
    }
}

当您选择月份时，日历的最顶部也会中断：

.placed-input {
    ...
    width: 80%; //this line is breaking your code
}

我不知道你到底想完成什么

基于primeng页面，你的日历加上额外的样式效果很好：

<p-calendar [(ngModel)]="date3" [showIcon]="true"></p-calendar>

【讨论】：