不能让我的按钮在不同的浏览器中看起来一样 [英] Can't make my button look the same in different browsers

问题描述

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

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.

这是我使用的按钮：

<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个不同浏览器中得到的结果：

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.

按钮应该像粘贴的图像适用于Chrome浏览器。我会欣赏一些帮助。

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

推荐答案

作为互联网浏览器< 9不知道圆角，你将无法在IE中这样做，因为渐变更有可能会在每个浏览器中获得不同的结果。

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!" />

这篇关于不能让我的按钮在不同的浏览器中看起来一样的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！