Help with IE VS Chrome css issues

Question

I have an input field and label which I use the floating label technic.

In Chrome\ Edge\ FireFox It works great but on IE it doesn't.

When I test a field via IE I see that it take my label and put it on the side of the input text instead inside in the placeHolder place.

This is my code :

<div class="col-md-3">
    <div class="floating-label input-group ">
        <apex:input html-placeholder=" " styleClass="form-control" value="{!firstName}" type="text" id="firstnameId" required="true" />
        <label class="control-label placeholderinga" for="FirstName"> {!$ObjectType.Opportunity.fields.First_Name__c.label}</label>
    </div>
</div>

CSS :

.floating-label {
   position: relative;
   margin-bottom: 1.5rem;
}


input-group - Bootstrap class


.placeholderinga {
    position: absolute;
    top: 0;
    padding: 7px 0 0 13px;
    transition: all 200ms;
    opacity: 0.5;
}

.form-control:focus + .placeholderinga,
.form-control:valid + .placeholderinga {
    font-size: 75%;
    transform: translate3d(0, -100%, 0);
    opacity: 1;
}

Any help please?

Thanks!

Answer 1

I found the answer to it.

You can use this one :

@media screen\0 {
   .ie891011 {
     left:66%;
     display: inline-table;
     color: red;
     otherAttribute: value
   }
}

And then, just add to your style or styleClass this "ie891011" css class style.

This will add to your style the attribute above or will override if they have the same attributes when using IE V 8,9,10,11.