html - 跨浏览器 - CSS 填充问题

Question

我正在尝试在输入字段后制作一个验证框，但是，在不同的浏览器中，尺寸会出错，例如firefox 和 chrome 之间有很大的区别。

是否有更好的方法来制作此框，以便在所有浏览器中大小相同？这是我目前如何做的代码和 jsfiddle:http://jsfiddle.net/wPS7t/

这是问题的图片:

HTML

    <form id="formStyles">

        <div id="inputWrapper">
            <input type="text"/>
            <label id="xlabel">x</label>
        </div>                         

    </form>

CSS

        body{
            margin: 0;
            padding: 0;
            height: 100%;
            width: 100%;
            font-family: Calibri;
        }

        *, *:before, *:after {
            -moz-box-sizing: border-box; 
            -webkit-box-sizing: border-box; 
            box-sizing: border-box;
        }

        #formStyles{
            width: 800px;
            margin: 0 auto;
            top: 200px;
            position: relative;
        }

        input{
            font-size: 18px;
            padding: 5px;
        }

        #inputWrapper{
            position: relative;
            margin-left:auto;
            margin-right:auto;
            width:400px;
        }

        #xlabel{
            background-color: red;
            padding: 7.2px;
            color: white;
            left: -6px;
            position: relative;
            top:-1px;

        }

Answer 1

也许尝试填充 7px？我不是很肯定，但我不认为除了 7.2px 之外的两种浏览器结果可能是四舍五入。