CSS Web Design tip: The text of the form button

Article Introduction: the text-indent problem with the form button.

Html

Html

CSS Code
In this example, the button is made by the background of the picture, and the most common method of the image substitution is "text-indent" to make

#btn {
width:114px;
height:37px;
Border:none;
Background:transparent URL (images/submit_btn.gif) no-repeat Center;
Overflow:hidden;
Text-indent: -999px;
}

The above code, in the modern browser will not have any problems, but under IE "text-indent:-999px" is not working, please see the effect of the picture:

How to Solve

In order for the browsers to normalize the display, I usually have the problem of adding "Font-size and Line-height settings" to the above code:

#btn {
width:114px;
height:37px;
Border:none;
Background:transparent URL (images/submit_btn.gif) no-repeat Center;
Overflow:hidden;
Text-indent: -999px;

font-size:0;
line-height:0;
Display:block;

}

This will achieve the same effect as the browser. Finally, we are looking at how he works. Or why do you want to add these lines of code?

font-size:0 plus font-size:0, you can solve the problem of IE7 display text (in other words, by setting font-size equal to 0, button in the IE7 browser will not show the text out to achieve the desired effect), But there is a clear line under IE6, and the line color is the same as the foreground color.
Line-height:0 the first said, font-size only to solve the problem of IE7, left a line in the IE6, to solve this problem is also simple, we can set up line-height to 0来 solution.
Display:block button is displayed as block element

That's why you're setting this up. Sometimes you can leave a small point for your button when you set it, and I usually set it by color:

#btn {
width:114px;
height:37px;
Border:none;
Background:transparent URL (images/submit_btn.gif) no-repeat Center;
Overflow:hidden;
Text-indent: -999px;

font-size:0;
line-height:0;
Display:block;


Color: #fff;
Text-align:right;

}

Here's a trick to pay special attention to: here the color selection of its background color, so that people can not see the naked eye, I usually put its text to the left or right, and then choose its closest color as background color. For example, we chose white.