关于IE11的样式兼容问题记录-编程知识

关于IE11的样式兼容问题记录

1、布局如下

<div class="map-label" :class="{active:isActive}" :style="{marginTop:`${marTopVal}px`}"><transition name="slide-fade"><div class="transition-out" v-if="show"><div class="circle-out" :style="{left:circleLeft,top:circleTop}"><div class="circle-in"></div></div><svg class="map-line" :style="{left:circleLeft,top:`${lineTop}px`,width:`${svgWidth}px`}"><polyline :points=svgPoints :stroke-dasharray="isActive?0:'2,1'"style="fill:transparent;stroke:#2587FF;stroke-width:1" :style="{stroke:isActive?'#2587FF':'#D9D9D9'}" /></svg><span class="title" :class="{activetitle:isActive}" @click="showDescribe">{{title}}</span></div></transition>
</div>

.map-label {font-family: SourceHanSansCN-Regular, SourceHanSansCN;font-size: 14px;line-height: 14px;position: relative;z-index: 5;color: $cf;.transition-out {display: flex;.title {padding: 4px;border: 1px solid $border-color;background: $cf;color: $c3;}}.circle-out {position: absolute;z-index: 5;display: inline-block;width: 16px;height: 16px;border-radius: 50%;background: $cf;border: 1px solid $c9;.circle-in {display: inline-block;margin: 4px;width: 6px;height: 6px;border-radius: 50%;background: $c9;}}&.active .circle-out {background: $main-col;border: 1px solid $main-col;.circle-in {background: $cf;}}.map-line {position: absolute;z-index: 1;}&.active .title {border: 1px solid $main-col;background: $main-col;color: $cf;&:after {content: '';position: absolute;width: 10px;height: 10px;left: -6px;top: -6px;border-top: 4px solid $main-col;border-left: 4px solid $main-col;}&:before {content: '';position: absolute;width: 10px;height: 10px;right: -6px;bottom: -6px;border-bottom: 4px solid $main-col;border-right: 4px solid $main-col;}}.map-describe {display: none;&.mask {min-width: 280px;background: $cf;border-color: $cf !important;left: -40px;div {color: $cf !important;}img {visibility: hidden;}}.line {display: none;}}.activeDes {transition: 0.3s ease-in;transform-origin: 0 0;animation: slide-down 0.3s ease-in;animation-delay: 0.2s;animation-fill-mode: forwards;}&.active {.map-describe {min-width: 245px;color: $c3;display: block;position: absolute;top: 50%;margin-top: -90px;left: 132px;border: 1px solid $main-col;border-left-width: 4px;.describe-name {font-size: 18px;color: $main-col;}div {margin: 20px;}.line {position: absolute;left: -43px;top: 50%;display: inline-block;width: 40px;height: 1px;margin-top: 1px;background: $main-col;transition: 0.2s ease-in;animation: lineToRight 0.2s ease-in;animation-fill-mode: forwards;transition-delay: 0.2s;}.describe-div {display: flex;align-items: center;img {width: 20px;margin-right: 10px;}}}}
}

效果如图：
在这里插入图片描述

在谷歌浏览器上正常，在ie浏览器上如下图显示：
在这里插入图片描述
解决：不同于谷歌浏览器，在ie浏览器中，仅标签最外部定位position:relative;里面和absolute定位同级别的不需要绝对定位的标签也需要加上position:relative;并加上z-index才可以识别优先级，不然会穿透元素。