Html Firefox don'上的角度;t调整div容器的大小
我在Firefox上的Angular项目有一个奇怪的问题。 我有一个包含一些元素的列表(超过ngfor)。在Chrome和IE上,如果我从列表中删除一些项目,则可以毫无问题地调整div的大小。但在Firefox上,原始大小仍然保持不变 在Chrome上: 在Firefox上: 我的代码:Html Firefox don'上的角度;t调整div容器的大小,html,css,angular,firefox,Html,Css,Angular,Firefox,我在Firefox上的Angular项目有一个奇怪的问题。 我有一个包含一些元素的列表(超过ngfor)。在Chrome和IE上,如果我从列表中删除一些项目,则可以毫无问题地调整div的大小。但在Firefox上,原始大小仍然保持不变 在Chrome上: 在Firefox上: 我的代码: <div class="notification-main-container" *ngIf="shares.length !== 0"> <div class="notificati
<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>
有人知道它是什么吗?我用flex box解决了这个问题。现在它在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;
}
最好添加您的代码片段
@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;
}