我有一个时间表,在Chrome中,类.location
的页边空白,但在ios / Safari上什么也没有发生。 (margin-bottom:.location上为94px)
这是我的标记:
<ion-scroll class="time-table" id="scroll" #scroll scrollX="true" scrollY="true">
<div class="line" [ngStyle]="{'left': leftTime, 'height': '100vh'}"></div>
<div class="locations" *ngFor="let locations of dayselect; index as i">
<ion-row class="location">
<div class="gig">
<div class="gig-box" *ngFor="let d of locations.eventSchedules; index as j" [ngStyle]="{'width': d.duration * minute + 'px', 'left': d.minutesFromStart * minute + 40 + 'px'}">
<img src="assets/imgs/2.png" alt="">
<h4>{{d.event.name }}</h4>
<p>{{cut3(d.startTime) + '-' + cut3(d.endTime)}}</p>
<ion-icon name="heart" class="fav"></ion-icon>
</div>
</div>
</ion-row>
</div>
<div *ngFor="let locations of dayselect; index as i" class="loca">
<h5 class="s{{i + 1}}" [ngStyle]="{'left': venuescroll}">{{locations.name}}</h5>
</div>
</ion-scroll>
这是CSS:
.line {
width: 3px;
z-index: -999999;
position: absolute;
top: -3px;
background: $brand;
}
.location {
width: 100%;
position: relative;
margin-bottom: 94px; // <------- THIS ONE does not work
}
.gig {
position: absolute;
display: inline-block;
top: 65px;
.gig-box {
background: $brand;
display: inline-block;
position: absolute;
z-index: 999;
height: 50px;
.fav {
color: white;
position: absolute;
right: 10px;
top: 16px;
}
p,
h4 {
position: absolute;
padding: 0;
margin: 0;
color: white;
display: inline-block;
margin-left: 10px;
}
h4 {
font-size: 14px;
font-weight: 700;
margin-top: 9px;
top: 0;
}
p {
font-size: 12px;
margin-top: 3px;
;
top: 25px;
}
img {
height: 50px;
}
}
}