Way to Align Checkboxes and Their Labels Consistently (cross-browsers)

So, the problem is how to align checkbox and its label and looking the same in all browsers. You align them in one browser and then check with another they can be completely messed up.

Let’s have the standard code first:

<form>
    <div>
        <label><input type="checkbox" /> Label text</label>
    </div>
</form>

And is one solution that I find working perfect for my need:

label {
    display: block;
    padding-left: 15px;
    text-indent: -15px;
}
input {
    width: 13px;
    height: 13px;
    padding: 0;
    margin:0;
    vertical-align: bottom;
    position: relative;
    top: -1px;
    *overflow: hidden;
}

This code assumes that you’re using a reset like Eric Meyer’s that doesn’t override form input margins and padding (hence putting margin and padding resets in the input CSS).