跨浏览器 - 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之外的两个浏览器都可能是圆形的。