CSS Web page making tutorial: The row height of the form button

Article Introduction: The row height problem for the form button.

HTML Code

CSS Code

#button {

border:2px solid #06f;

Color: #06f;

Background-color: #6cf;

Font:bold 12px Arial, Helvetica, Sans-serif;

line-height:50px;

}

In a multiple-effect diagram, it's obvious that there are problems in both Firefox and opera browsers, and the fatal point is: "No matter what method you use to modify the button's line-height, there is no effect in Firefox or opera browsers." "What caused it?" (I've never noticed a bug like this before.) Read the above article I know, originally is the browser to define button Line-height is different, we take a look at the browser in Firefox, the resolution of the Line-height value screenshot:

Let us know from the diagram: The row height of the button in CHROME/SAFARI/IE8 and other browsers to parse the correct line-height (user-defined value "50px"), and in Firefox and Opera parsing line-height is the default value, Only "15px". Why is that so?

To answer this question, I can't answer it, maybe you know why? I can only think of him as a feature of the Firefox and Opera browsers, in other words: The line-height default for both browsers is normal and a "!important" is added, similar to the following:

button, input[type= "Reset"], input[type= "button"], input[type= "Submit"] {

Line-height:normal!important;

}

Can we also add a "!important" solution when setting the value? I tried, but failed, so what do we need to do to solve it?

How to solve?

Rob Glazebrook used a method in his "The Firefox Input Button line-height Bug" Tutorial--not resetting the Line-height value in the Button, but using padding to make the same effect. The above example can be modified like this:

#button {

border:2px solid #06f;

Color: #06f;

Background-color: #6cf;

Font:bold 12px Arial, Helvetica, Sans-serif;

PADDING:18PX 6px;

}