Question

我在Firefox上的Angular项目遇到一个奇怪的问题。我有一些元素的列表（在ngfor之上）。在Chrome和IE上，如果我从列表中删除了某些项目，则可以毫无问题地调整div的大小。但是在Firefox上，原始大小仍然存在。

在Chrome上：

在Firefox上：

我的代码：

<div class="notification-main-container" *ngIf="shares.length !== 0">
  <div class="notification-header-container">
    <div class="notification-header">
      <h3
        class="notification-headline"
        i18n="Headline for quickLinkShareNotofication@@quickLinkShareNotification.headline"
      >
        Your shared Quick Links
      </h3>
      <div class="notification-subheader" i18n="Subheadline for quickLinkShareNotification@@quickLinkShareNotification.subHeadline">
        A colleague shared a quick link with you. Press accept or reject. The new quick link will be added below.
      </div>
    </div>
  </div>
  <div class="notification-container">
    <div class="notification-element" *ngFor="let share of shares">
      <div class="notification-element-img">
        <img src="{{ getFaviconUrl(share.quickLink.favIcon) }}" />
      </div>
      <div class="notification-element-text">
        <div class="notification-element-name">
            {{ share.quickLink.name }}
        </div>
        <div class="notification-element-url">
            {{ share.quickLink.url }}
        </div>
      </div>
      <div class="notification-element-button-container">
        <div class="notification-element-button-accept">
          <button class="notification-element-button-accept-button" (click)="acceptShare(share)" i18n="Accept Button for quickLinkShareNotification@@quickLinkShareNotification.accpetButton">
            Accept
          </button>
        </div>
        <div class="notification-element-button-decline" i18n="Reject Button for quickLinkShareNotification@@quickLinkShareNotification.rejectButton">
          <button class="notification-element-button-decline-button" (click)="declineShare(share)">
            Reject
          </button>
        </div>
      </div>
      <div class="notification-container-from">
        <span i18n="Shared User shareBy@@quickLinkShareNotification.ShareBy">Shared by</span> {{ share.sourceUser.email }}
      </div>
    </div>
  </div>
</div>

notification-headline {
  display: inline-block;
  vertical-align: top;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  // width: 100%;
  // margin-top: 30px;
}

.notification-header {
  float: left;
  padding-top: 30px;
  margin-left: 30px;
  //margin-bottom: 15px;
  // width: 85%;
  //max-width: calc(100% - 310px);
  margin-bottom: 30px;
}

.notification-container {
  padding-bottom: 50px;
  float: left;
  //display: block;
  resize: horizontal;
  width: 95%;
}

.notification-element {
  width: 100%;
  float: left;
  margin-left: 30px;
  padding-right: 30px;
  padding-bottom: 10px;
  padding-top: 15px;
  margin-right: 30px;
  border-top: 0px;
  border-right: 0px;
  border-left: 0px;
  border-bottom: 1px;
  border-color: lightgrey;
  border-style: solid;
}

.notification-container-from {
  float: left;
  margin-left: 30px;
}

.notification-element-text {
  float: left;
  margin-left: 30px;
  width: 55%;
}

.notification-main-container {
  display: block;
}

.notification-element-img {
  float: left;
}

.notification-element-button-container {
  float: right;
  margin-left: 25px;
}

.notification-element-button-accept {
  float: left;
}

.notification-element-button-decline {
  float: left;
  margin-left: 20px;
}

.notification-element-button-decline-button {
  font-size: 18px;
  border: none;
  background-color: white;
  padding-top: 10px;
  padding-bottom: 10px;
  padding-left: 25px;
  padding-right: 25px;
  border: 1px solid black;
}

.notification-element-button-accept-button {
  font-size: 18px;
  color: white;
  border: none;
  padding-top: 10px;
  padding-bottom: 10px;
  padding-left: 25px;
  padding-right: 25px;
  background-color: $dark-blue;
}

.notification-element-url {
  overflow-wrap: break-word;
  white-space: nowrap;
  overflow: hidden;
}

有人知道它是什么吗？

Answer 1

我用柔韧性盒解决了。现在，它可以在Firefox上正常工作

@import "~shared/styles/variables.scss";
@import "~shared/styles/layover-utils.scss";
@import "~shared/styles/content.scss";

.notification-headline {
  display: inline-block;
  vertical-align: top;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  // width: 100%;
  // margin-top: 30px;
}

.notification-header {
  float: left;
  padding-top: 30px;
  margin-left: 30px;
  //margin-bottom: 15px;
  // width: 85%;
  //max-width: calc(100% - 310px);
  margin-bottom: 30px;
}

.notification-container {
  padding-bottom: 50px;
  display: block;
  width: 95%;
}

.notification-element {
  width: 100%;
  float: left;
  margin-left: 30px;
  padding-right: 30px;
  padding-bottom: 10px;
  padding-top: 15px;
  margin-right: 30px;
  border-top: 0px;
  border-right: 0px;
  border-left: 0px;
  border-bottom: 1px;
  border-color: lightgrey;
  border-style: solid;
}

.notification-container-from {
  float: left;
  margin-left: 30px;
}

.notification-element-text {
  float: left;
  margin-left: 30px;
  width: 55%;
}

.notification-main-container {
  display: flex;
  flex-direction: column;
}

.notification-element-img {
  float: left;
}

.notification-element-button-container {
  float: right;
  margin-left: 25px;
}

.notification-element-button-accept {
  float: left;
}

.notification-element-button-decline {
  float: left;
  margin-left: 20px;
}

.notification-element-button-decline-button {
  font-size: 18px;
  border: none;
  background-color: white;
  padding-top: 10px;
  padding-bottom: 10px;
  padding-left: 25px;
  padding-right: 25px;
  border: 1px solid black;
}

.notification-element-button-accept-button {
  font-size: 18px;
  color: white;
  border: none;
  padding-top: 10px;
  padding-bottom: 10px;
  padding-left: 25px;
  padding-right: 25px;
  background-color: $dark-blue;
}

.notification-element-url {
  overflow-wrap: break-word;
  white-space: nowrap;
  overflow: hidden;
}

Firefox上的Angular不要调整div容器的大小

1 个答案: