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

enter image description here

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

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

Answer 1

作为互联网浏览器＆lt; 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的Gradient支持是通过DX Image Transforms完成的。

Cross Browser CSS Gradient给出了如何通过浏览器实现渐变的示例。

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

Answer 3

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

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

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

让它在IE7和IE8中优雅地降级。也就是说，不要担心角落不圆，你仍然会有一个绿色按钮。在良好的浏览器中，它看起来会更好一些;但人们不会真正关心，因为普通用户不会进行并排比较。
使用图片。如果你需要（由客户，老板等）在浏览器中使用px-perfect，我只会建议这样做。

就个人而言，我首先尝试避免重新构建表单元素，因为它很昂贵（时间成本因为很难做）并且不可靠。让他们独自一人，用户只是不注意它们，这很好 - 他们在网上完成任务：）

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

3 个答案: