无法使我的按钮在不同浏览器中看起来相同

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

作为互联网浏览器< 9 不知道圆角，您将无法在 IE 中执行此操作，因为渐变更有可能在每个浏览器中得到不同的结果。

最佳实践是制作图像并向其中添加自定义设计，然后插入提交作为图像

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

Answer 2

带有圆角和渐变的按钮很难跨浏览器，当你还必须照顾 IE 时。

对于 Firefox，只需添加 -moz-border-radius: 40px; 即可使其看起来像在 Chrome 上。

对 IE 的渐变支持是通过 DX 图像变换完成的。

跨浏览器CSS渐变给出了如何实现跨浏览器渐变的示例。

编辑：但是，Mihai 是正确的，最好通过图像而不是按钮来实现结果，因为它的外观不依赖于引擎/浏览器。

Answer 3

我建议使用像 http://border-radius.com/ 这样的边框半径生成器来设置圆角，它会给你你所缺少的额外值（注意顺序很重要）：

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

至于使其在浏览器中看起来相同，使用按钮这是一个痛苦的世界，所以你有两个主要选择：

1. 让它降级在 IE7 和 IE8 中优雅地运行。也就是说，不用担心角不圆，您仍然会有一个绿色按钮。在好的浏览器中它看起来会更好一些；但人们不会真正关心，因为普通用户不会进行并排比较。
2. 使用图像。仅当您（客户、老板等）要求您使跨浏览器的 px 完美时，我才建议这样做。

就我个人而言，我首先尝试避免重新设计表单元素，因为它很昂贵（时间成本因为很难做到）并且不可靠。别管他们，用户只是不会注意到他们，这很好 - 他们在网络上完成工作:)