ios在VUE按数据切换视图中的class控制样式时,background丢失问题
<dl> <dd v-for="(floors, index2) in item.floors" :key="'dd'+activeName + '' + item.unitId + 'floor'+floors.floor+ 'index'+index + index2" > <div :class="{bnt: true, check: floors.isComplete === 1, disabled: floors.status !== 0}" @click="floorsClick(floors)" >{{ floors.floor }}层</div> </dd> </dl> .bnt { margin: 0 0 5px 5px; border-radius: 5px; color: #fff; text-align: center; width: 50px; height: 14px; line-height: 14px; background-color: #ffd2b9 !important; &.check { color: #fff; border: none; background-color: #f99d33 !important; } &.disabled { cursor: not-allowed; } }
在ios16下发现border-radius: 5px和background-color: #ffd2b9放在一起时,经过多次测试在切换class来变化样式时,background就会失效,在外侧增加一个div做border-radius加overflow: hidden;进行替换便可修复