无法在不同的浏览器中使我的按钮外观相同

Question

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

这是我使用的按钮：

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

这是我创建的CSS样式表:

```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浏览器粘贴的图像。我会感激一些帮助。

- javing

---

在每个浏览器上都需要看起来完全一样吗？必要的链接... - alexmuller

@alexmuller：[需要引用] - Cody Gray

Answer 1

由于Internet Explorer 9以下版本不支持圆角，因此您将无法在IE中实现。对于渐变，每个浏览器的结果可能会有所不同。

最佳实践是制作一个图片，并将自定义设计添加到图片中，然后将其插入为图像提交。

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

- Mihai Iorga

---

所以我需要三张图片吗？一个用于按钮，一个用于悬停时，另一个用于点击时对吧？ - javing

确切地说，这是一个坏事，因为IE破坏了所有的HTML。 - Mihai Iorga

我会听从您的建议。谢谢 :) - javing

使用CSS Sprite技术，只需一张图片即可：http://css-tricks.com/158-css-sprites/ 和 http://www.alistapart.com/articles/sprites - Jon P

Answer 2

我建议使用类似http://border-radius.com/的边框半径生成器来设置圆角，它可以为你提供缺失的额外值（请注意顺序很重要）：

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

关于如何使它在不同浏览器中看起来一样，对于按钮来说，这是一个头痛的问题，因此有两个主要选择：

1. 在IE7和IE8中优雅地降级。也就是说，不用担心边角不是圆的问题，你仍然会有一个绿色的按钮。在好的浏览器中它会看起来更漂亮一些；但人们不会真正关心，因为普通用户不进行并排比较。
2. 使用图片。我只建议在客户、老板等要求在不同浏览器中完全匹配的情况下使用此方法。

个人而言，我试图避免首先重新定义表单元素，因为它很昂贵（时间成本高，因为很难做到）和不可靠。把它们放下，并且用户根本不会注意到它们，这是可以接受的——他们上网是为了完成任务 :)

- BenB

---

谢谢您的建议，我会记住的。但是，我认为IE仍然是非常受欢迎的浏览器：http://www.w3schools.com/browsers/browsers_stats.asp，将近1/4的用户使用它。如果我发现花费太多时间，我可能会坚持使用图片。感谢您的回答+1。 - javing

在这种情况下，关键是观察IE7和IE8与IE9的份额- http://gs.statcounter.com/#browser_version-ww-monthly-201007-201107显示IE9呈良好上升趋势，而其他IE则明显呈下降趋势。这很重要的原因是IE9具有良好的CSS支持，因此随着时间的推移，越来越多的人将获得良好的结果。重点是您可能会维护有效的选项，而不必向页面添加额外的图像 :) - BenB

Answer 3

一个带有圆角和渐变的按钮在跨浏览器时非常难做，当你还要考虑IE的兼容性时。对于Firefox，只需添加-moz-border-radius: 40px;即可使其看起来像Chrome。IE的渐变支持是通过DX Image Transforms实现的。Cross Browser CSS Gradient提供了一个示例，说明如何实现跨浏览器的渐变效果。编辑：然而，Mihai是正确的，最好通过图像而不是按钮来实现该结果，因为它的外观不依赖于引擎/浏览器。

- Semyazas