CSS Chinese text box and button alignment solution

Let's first set the style for the input tag, with the following code:

HTML code

<form> <input type= "text" name= "Text1" id= "Text1"/>

<input type= "Submit" name= "button" id= "button" value= "Submit"/>

</form>

CSS Code

#text1 {border:1px solid red;height:20px;}

#button {background: #FFFFFF; color:blue;border:1px solid #000; height:24px;}

The text field is set to a height of 20px and the button height requires 24px. According to the standard of IE normal alignment, but in the Firefox Chinese text field and button height is staggered.

By setting the left float (float:left) on the input tag, the FIREFOX,CSS code can be compatible as follows:

#text1 {border:1px solid #000; height:20px;float:left;}

#button {background: #FFFFFF; color: #blue; border:1px solid #000; height:24px;float:left;}

Of course, you can use CSS to control your browser's performance more specifically.

Summary: The button always uses the quirks mode on the height calculation. In quirks mode, the calculation of the border is within the width of the element, not the same as the standard mode, so setting the border on the text and button will give the button a smaller height than the text. So the text box is aligned with the button, and the button is taller than the text. (The height of the button contains the height of the border, and the text box does not contain the border height.) ）

CSS Chinese text box and button alignment solution