css working fine chrome but not in mozilla by using zend

Question

Im working on a signin form.I have given all properties by testin it on googlechrome.After completing the form I checked it in mozilla.the dimensions I have specified are completely changed especially height.Can I know the reason behind this. here is my code

input
{
  padding: 13px 14%;
 }
#email-wrapper #email-label
{  
  border: 1px solid #e5d4c2;
border-radius: 3px 0 0 3px;
border-right: 1px solid #FFF;
display: inline-block;
height: 39px;
line-height: 36px;
vertical-align: middle;
margin-right: 0;
width: 36px;
}

    #email-wrapper #email-label label 
{
  background: url("~/application/modules/User/externals/images/mail.png") no-repeat              scroll 19px 13px #FFFFFF;
       background-size: 15px 15px;   
    }
#email-wrapper #email-label label
{
 color:transparent;
   }

Answer 1

Please Use this CSS and Cross Browser :

input{
    padding: 13px 14%;
}

#email-wrapper #email-label{

    border: 1px solid #e5d4c2;
    -webkit-border-radius: 3px 0 0 3px;
       -moz-border-radius: 3px 0 0 3px; 
         -o-border-radius: 3px 0 0 3px; 
        -ms-border-radius: 3px 0 0 3px;
            border-radius: 3px 0 0 3px;
    border-right: 1px solid #FFF;
    display: inline-block;
    height: 39px;
    line-height: 36px;
    vertical-align: middle;
    margin-right: 0;
    width: 36px;
}

#email-wrapper #email-label label {
    background-image: url("~/application/modules/User/externals/images/mail.png") 
    background-repeat:no-repeat;
    background-color:#FFFFFF;
    background-position:19px 13px;
    background-size: 15px 15px;   
}
#email-wrapper #email-label label{
    color:transparent;
}

Answer 2

After watching the CSS Code My assumption is that input field height is different on both browser.. by giving the style to input field your problem should solve..

you need to add these property in your input field..

input
{
  padding: 13px 14%;
  border:1px solid #666;
  border-radius:5px;
 }

I hope this will work for you.

Regards,