Css text box and button mismatch solution, css text box solution

Css text box and button mismatch solution, css text box solution

We first set the style for the input tag. The Code is as follows:

 

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 20 PX, and the button height needs to be set to 24px. Alignment is normal according to IE standards, but in Firefox, the text field and button height are staggered.

 

At this time, by setting the left floating (float: left) on the input tag, Firefox is compatible. the CSS code is 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 browser performance more specifically.

 

Summary: The button always uses the Quirks mode in height calculation. In Quirks mode, the border is calculated within the width of the element, rather than the standard mode, therefore, if you set the border on both the text and button, the height of the button is smaller than that of the text. Therefore, the text box must be aligned with the button, and the height of the button must be higher than that of the text. (The height of the button contains the height of the border, while text in the text box does not contain the height of the border .)