HTML5/CSS3 differing input field widths when using Chrome and type="email" etc

[Azsen]

Hi,

I'm building an HTML5/CSS3 site and I've set a style called:

.smlFormInput {
width: 140px;
}

 

So I apply that to the following fields:

<input name="firstName" type="text" class="smlFormInput">
<input name="lastName" type="text" class="smlFormInput">
<input name="email" type="email" class="smlFormInput">
<input name="homePhone" type="tel" class="smlFormInput">

 

Ok now when executed in Firefox all the input boxes line up properly, but on Chrome the type="email" and type="tel" are different lengths (+2px). Kinda making my page look messy with different size text boxes. What's the problem? Chrome specific bug?

 

Many thanks

[s_ff_da_b_ff]

nevermind

[Azsen]

Turns out it's a webkit bug. Not sure if fixed yet.