CSS Web Design tips: Input button in IE browser compatibility problem

Article Introduction: CSS Web Design tips: The input button in IE browser compatibility issues.

This time in processing the Web page default input button, ie often appear inconsistent width problem, people feel very tangled. So today asked several experts to solve this problem, now posted out and share with you, of course, this method has been written on the internet, we can come together to discuss each other.

Html Code:

I'm going to post a first CSS style here.

CSS Code:

Input.form-submit {
The realization of fillet under BORDER-RADIUS:3PX;//FF
-webkit-border-radius:3px;//safari,chrome to achieve rounded corners
border:1px solid #469021;
Background: #64A246;
Color: #fff;
Font:bold 11px Arial,sans-serif;
Padding:0.25em 0.5em;
Text-transform:uppercase;
}

Let me take a look at the effect chart first:

From the above we can see clearly that only in the Firefox display is normal, in IE7 and IE no fillet effect, this is well known, but IE7 has a fatal problem, that is, the width of the longer, we will certainly feel strange, we do not have a fixed width of ah, how can this be? We're going to cite someone else for a while, and that's the point, and it's the height of safari and chrome.

It is because of this problem, I struggled for an afternoon, but under the guidance of high man, or found the relevant solutions, and now we look at how the expert is how to solve such compatibility problem. The IE7 will increase the spacing between the left and right sides of the text as the text increases, causing the effect seen in the previous illustration, but the problem is found in Ie6/ie7,ff, IE8 and Opera 10. For another situation, the niche has not yet figured out why there will be a high degree of problems in Safari and chrome, and I hope you predecessors and masters of the guidance.

For the previous bug, I modified my CSS slightly, as follows:

Input.form-submit {

-webkit-border-radius:3px;

border-radius:3px;

border:1px solid #469021;

Background: #64A246;

Color: #fff;

Font:bold 11px Arial,sans-serif;

Padding:0.25em 0.5em;

Text-transform:uppercase;

height:27px;

line-height:19px;

margin:0;

overflow:visible;

Width:auto;

*width:1;

}

That is, I added the following lines of code on the previous basis

Input.form-submit {
height:27px;//set row height to solve the high problem of safari and Chrome
line-height:19px;//make text appear centered
margin:0;
overflow:visible;//only if you set this property ie under padding to be effective
width:auto;//Modern Browser recognition
*width:1;//ie7 and IE6 recognition, set a value of 1, I do not know what the effect, but some people here set a value of 0
}

So we have to solve the problem of headache, we can look at the modified effect:

Here to remind you, for the word center problem, not only by the row high impact, but also by its font, font size influence, we are interested can try.