不能让我的按钮在不同的浏览器中看起来一样

Question

我不擅长网页设计,我使用CSS创建了一个按钮,但我不知道如何让它在不同的浏览器中看起来一样.

这是我使用的按钮:

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

这是我创建的CSS:

.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;
   }

这是我在3种不同浏览器中得到的结果:

另外我想提一下,我不能将按钮置于屏幕中间.

该按钮应该看起来像是为Chrome浏览器粘贴的图像.我会感激一些帮助.

Answer 1

由于Internet Explorer <9不知道圆角,你将无法在IE中这样做,因为渐变更有可能在每个浏览器中得到不同的结果.

最佳做法是制作图像并向其添加自定义设计,然后将提交作为图像插入

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