Javascript 带有Css的浮动标签在边缘、internet explorer中不起作用

我使用Css创建了浮动标签输入字段，它可以与chrome、firefox正常工作，但不能与internet explorer和edge一起工作

所有其他浏览器显示的输入字段在未聚焦时与第一个图像中显示的相同，在聚焦时与第二个图像相同。 Internet explorer和edge始终显示输入字段，如第二幅图像

下面是我的代码片段

。具有浮点标签{
显示：块；
位置：相对位置；
}
.有浮动标签，
.具有浮动标签>范围{
颜色：灰色；
位置：绝对位置；
左：0；
排名：0；
光标：文本；
字体大小：120%；
不透明度：1；
-webkit转换：all.3s；
过渡：全部3秒；
}
.已选择浮动标签{
-webkit外观：无；
-moz外观：无；
外观：无；
}
.具有浮动标签文本区域{
宽度：100%；
}
.具有浮点标签输入，
.已选择浮动标签，
.具有浮动标签文本区域{
字体大小：15px；
字体大小：正常！重要；
垫面：1.3em；
边缘底部：2px；
边界：0；
高度：45px；
边界半径：0；
边框底部：2倍实心rgba（0,0,0,1）；
}
.具有浮点标签输入：：-webkit输入占位符，
.已选择浮动标签：-webkit输入占位符，
.has float label textarea:：-webkit输入占位符{
不透明度：1；
-webkit转换：all.2s；
过渡：all.2s；
}
.具有浮点标签输入：：-moz占位符，
.已选择浮动标签：：-moz占位符，
.has float label textarea:：-moz占位符{
不透明度：1；
过渡：all.2s；
}
.具有浮点标签输入：-ms输入占位符，
.已选择浮动标签：-ms输入占位符，
.具有浮动标签文本区域：-ms输入占位符{
不透明度：1；
过渡：all.2s；
}
.具有浮点标签输入：：占位符，
.具有浮点标签select:：占位符，
.具有浮动标签textarea:：占位符{
不透明度：1；
-webkit转换：all.2s；
过渡：all.2s；
}
。已显示浮点标签输入：占位符：未（：焦点）：-webkit输入占位符，
。已显示浮点标签select:占位符：未（：焦点）：：-webkit输入占位符，
.已显示浮动标签文本区域：占位符：未（：焦点）：：-webkit输入占位符{
不透明度：0；
}
。已显示浮点标签输入：占位符：未（：焦点）：：-moz占位符，
。已显示浮点标签select:占位符：未（：焦点）：：-moz占位符，
.已显示浮动标签文本区域：占位符：未（：焦点）：：-moz占位符{
不透明度：0；
}
。已显示浮点标签输入：占位符：未（：焦点）：-ms输入占位符，
.已显示浮点标签select:占位符：未（：焦点）：-ms输入占位符，
.已显示浮动标签文本区域：占位符：未（：焦点）：-ms输入占位符{
不透明度：0；
}
.已显示浮点标签输入：占位符：未（：焦点）：：占位符，
.已显示浮动标签select:占位符：未（：焦点）：：占位符，
.已显示浮动标签文本区域：占位符：未（：焦点）：：占位符{
不透明度：0；
}
.已显示浮点标签输入：占位符：非（：焦点）+*，
.已显示浮点标签select:占位符：非（：焦点）+*，
.显示了浮动标签文本区域：占位符：非（：焦点）+*{
字体大小：140%；
不透明度：.5；
顶部：1.3em；
}
.具有浮点标签输入：焦点，
.已选择浮动标签：焦点，
.具有浮动标签文本区域：焦点{
大纲：0；
边框颜色：#4285f4；
}
.已选择浮动标签{
右侧填充：1em；
背景：url（“数据：image/svg+xml”）；
charset=utf8，%3Csvg xmlns=%http://www.w3.org/2000/svg'viewBox='0 0 4 5'%3E%3Cpath fill='%23333'd='M2 0L0 2h4zm0 5L0 3h4z'/%3E%3C/svg%3E'）不重复右下角.5em底部.25em；
背景尺寸：8px 10px；
}

名字
*

向您的输入中添加

必需的

，允许我使用

：无效的

伪元素代替显示的

：占位符

。它并没有让占位符样式的一切都完美地工作，但现在你应该看到IE中触发的标签动画

我会说，更新你的代码，看看你是否可以把问题缩小到整个UI的较小元素，看看是否有人可以一次解决一件事

。具有浮点标签{
显示：块；
位置：相对位置；
}
.有浮动标签，
.具有浮动标签>范围{
颜色：灰色；
位置：绝对位置；
左：0；
排名：0；
光标：文本；
字体大小：120%；
不透明度：1；
-webkit转换：all.3s；
过渡：全部3秒；
}
.已选择浮动标签{
-webkit外观：无；
-moz外观：无；
外观：无；
}
.具有浮动标签文本区域{
宽度：100%；
}
.具有浮点标签输入，
.已选择浮动标签，
.具有浮动标签文本区域{
字体大小：15px；
字体大小：正常！重要；
垫面：1.3em；
边缘底部：2px；
边界：0；
高度：45px；
边界半径：0；
边框底部：2倍实心rgba（0,0,0,1）；
}
.具有浮点标签输入：：-webkit输入占位符，
.已选择浮动标签：-webkit输入占位符，
.has float label textarea:：-webkit输入占位符{
不透明度：1；
-webkit转换：all.2s；
过渡：all.2s；
}
.具有浮点标签输入：：-moz占位符，
.已选择浮动标签：：-moz占位符，
.has float label textarea:：-moz占位符{
不透明度：1；
过渡：all.2s；
}
.具有浮点标签输入：-ms输入占位符，
.已选择浮动标签：-ms输入占位符，
.具有浮动标签文本区域：-ms输入占位符{
不透明度：1；
过渡：all.2s；
}
.具有浮点标签输入：：占位符，
.具有浮点标签select:：占位符，
.具有浮动标签textarea:：占位符{
不透明度：1；
-webkit转换：all.2s；
过渡：all.2s；
}
.具有浮点标签输入：无效：非（：焦点）：：-webkit输入占位符{
不透明度：0；
}
.具有浮点标签输入：无效：非（：焦点）：：-moz占位符{
不透明度：0；
}
.具有浮点标签输入：焦点：-ms输入占位符{
不透明度：0；
}
.具有浮点标签输入：无效：非（：焦点）：-ms输入占位符{
颜色：透明；
}
.已显示浮点标签输入：占位符：未（：焦点）：：占位符，
.有浮动标签
input:not(:placeholder-shown) + span {
    color: blue;
    transform: translateY(-1.25rem) scale(0.75);
}

.entered-value + span {
    color: blue;
    transform: translateY(-1.25rem) scale(0.75);
}

<input [ngClass]="{'entered-value': value}" 
       [(ngModel)]="value"
...

 @Directive({
       selector:"[placeholder]"
    })
    export class PlaceHolderShownDirective 
    implements 
    DoCheck {
     constructor(private el:ElementRef, private renderer:Renderer2){

    }

    ngDoCheck():void {

    this.modify();
    }



    modify() {
element=this.el.nativeElement;
           const labelSibling = this.renderer.nextSibling(element);
            labelSibling.classList[element.value?"add":"remove"]("placeholder-shown");
            }   

        }

/// CSS

label.placeholder-shown {
  font-size:12px;
  top: -12px;
  background: #04031d;
  padding:5px;
  margin: 0 0 0 8px;
  color: #fff;
}

.form-control:focus + label, .form-control:focus + label.placeholder-shown {
  font-size:12px;
  top: -12px;
  background: #04031d;
  padding:5px;
  margin: 0 0 0 8px;
  color: #fff;
}

 //AppModule ts



     const userAgent = window.navigator.userAgent;
        const isFireFox = /msie\s|trident\/|firefox\//i.test(userAgent);

        // Add directive based on condition
        declaration : [
        ...
        ...
        isFirefox ? PlaceHolderShownDirective : []
    ]

/// HTML
<input placeholder=" " name="password" type="password" class="form-control"/>
<label class="form-control-placeholder" for="password">Password</label>