Can't make my button look the same in different browsers

问题

I am not very good at web design, I created a button using CSS but I don't know how to make it look the same in different browsers.

This is the button I use:

<input type="submit" class="randombutton" value="click here!"/>

This is the css I created:

.randombutton {
   border-top: 1px solid #d1d425;
   background: #e6eb4c;
   background: -webkit-gradient(linear, left top, left bottom, from(#92b019), to(#e6eb4c));
   background: -webkit-linear-gradient(top, #92b019, #e6eb4c);
   background: -moz-linear-gradient(top, #92b019, #e6eb4c);
   background: -ms-linear-gradient(top, #92b019, #e6eb4c);
   background: -o-linear-gradient(top, #92b019, #e6eb4c);
   padding: 19px 38px;   
   border-radius: 40px;  
   color: white;
   font-size: 23px;
   font-family: Georgia, Serif;
   text-decoration: none;
   vertical-align: middle;
   display: block;
    margin-left: auto;
    margin-right: auto;
   }
.randombutton:hover {
    border-top-color: #c0df36;
   background: #c0df36;
   color: white;
   }
.randombutton:active {
   border-top-color: #9eb829;
   background: #9eb829;
   }

This is the result I get in 3 different browsers:

Also I would like to mention that I can't center the button in the middle of the screen.

The button should look like the image for pasted for the Chrome browser. I'll appreciate some help.

回答1:

As internet explorer < 9 doesn't know about round corners you will not be able to do that in IE, as for gradient is more likely you will get different results in every browser.

The best practice is to make an image and add your custom design to it and then insert submit as an image

<input type="image" name="submit" src="http://www.example.org/images/my_submit_button.png" value="click here!" />

回答2:

A button with rounded corners and gradient is very hard to do cross browser, when you have to take care of IE as well.

As for Firefox, just add -moz-border-radius: 40px; to make it look like on Chrome.

The Gradient support for IE is done through DX Image Transforms.

Cross Browser CSS Gradient gives an example how to achieve gradients cross browser.

Edit: However, Mihai is correct, it would be best to achieve the result through an image instead of a button, since it's looks are not engine-/browser-dependent.

回答3:

I would suggest using a border-radius generator like http://border-radius.com/ to set up the rounded corners, it'll give you the extra values you're missing (note the order is significant):

-webkit-border-radius: 40px;
-moz-border-radius: 40px;
border-radius: 40px;

As for making it look the same across browsers, with buttons it's a world of pain so you have two main options:

Let it degrade gracefully in IE7 and IE8. That is, don't worry that the corners aren't round, you'll still have a green button. In good browser it's going to look a little nicer; but people won't really care since normal users don't do side-by-side comparisons.
Use an image. I'd only suggest this if you are required (by clients, the boss, etc) to make things px-perfect across browsers.

Personally I try to avoid restyling form elements in the first place, because it expensive (time cost because it's hard to do) and unreliable. Leave them alone and users just don't notice them, which is fine - they're on the web to get things done :)

来源：https://stackoverflow.com/questions/7056000/cant-make-my-button-look-the-same-in-different-browsers

标签

html

css

browser