How do I position a div in the same relative position across browsers

Issue

The following markup displays the checkbox in a different position onscreen (relative to other elements on the screen) in Chrome vs Edge:

<div
    <label >
        <input type="checkbox" onclick="passwordOne(); 
          passwordTwo()">
    </label> Show Password
</div>

I need them to be more or less in the same spot in every browser —not significantly different. I’ve used pixels and % instead of em, but I get the same inconsistent positioning. How can I fix this?

Solution

I was able to solve the issue by placing the div inside of a Form (instead of outside of the Form). Once I did that, the relative position in Chrome and Edge were the same.

Answered By – Condado

This Answer collected from stackoverflow, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0

Leave a Reply

(*) Required, Your email will not be published