0

My button is Chrome is appearing like this.

This is what I want.

In Firefox, however, it appears like this.

.mainButton_grey { 
  border: 1px solid BFBFBF; 
  background: -webkit-linear-gradient(top,#DBDBDB,#D1D1D1);
  padding-top:7px;
  text-align:center;
  cursor:pointer;
  width:200px;
  height:22px;
  border-radius:3 3;
  background-color:#0972BD; 
  font-size:11px; 
  font-weight:bold; 
  font-family:Arial;
  color:#404040;
 }

Jsfiddle here.

4

3 回答 3

2

只是对渐变的一点建议 - 如果您想要尽可能多的浏览器兼容性，请添加以下内容（只需更改值）。

background: -moz-linear-gradient(black, white); /* FF 3.6+ */  
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #000000), color-stop(100%, #ffffff)); /* Safari 4+, Chrome 2+ */  
background: -webkit-linear-gradient(black, white); /* Safari 5.1+, Chrome 10+ */  
background: -o-linear-gradient(black, white); /* Opera 11.10 */  
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#000000', endColorstr='#ffffff'); /* IE6 & IE7 */  
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#000000', endColorstr='#ffffff')"; /* IE8+ */  
background: linear-gradient(black, white); /* the standard fallback for old browsers */

这里的语法解释：http ://www.impressivewebs.com/css3-linear-gradient-syntax/

这里有一个很棒的渐变生成器：http: //www.colorzilla.com/gradient-editor/

于 2012-12-01T01:50:35.413 回答
2

原因是你没有定义线性渐变：

-moz-linear-gradient(top, #DBDBDB, #D1D1D1);

语法可能有点不同；但是每个浏览器都有不同的方式来解释渐变。

以下是每个浏览器的渐变示例：

background: rgb(245,246,246); /* Old browsers */
background: -moz-linear-gradient(top,  rgba(245,246,246,1) 0%, rgba(219,220,226,1) 21%, rgba(184,186,198,1) 49%, rgba(221,223,227,1) 80%, rgba(245,246,246,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(245,246,246,1)), color-stop(21%,rgba(219,220,226,1)), color-stop(49%,rgba(184,186,198,1)), color-stop(80%,rgba(221,223,227,1)), color-stop(100%,rgba(245,246,246,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  rgba(245,246,246,1) 0%,rgba(219,220,226,1) 21%,rgba(184,186,198,1) 49%,rgba(221,223,227,1) 80%,rgba(245,246,246,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  rgba(245,246,246,1) 0%,rgba(219,220,226,1) 21%,rgba(184,186,198,1) 49%,rgba(221,223,227,1) 80%,rgba(245,246,246,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  rgba(245,246,246,1) 0%,rgba(219,220,226,1) 21%,rgba(184,186,198,1) 49%,rgba(221,223,227,1) 80%,rgba(245,246,246,1) 100%); /* IE10+ */
background: linear-gradient(to bottom,  rgba(245,246,246,1) 0%,rgba(219,220,226,1) 21%,rgba(184,186,198,1) 49%,rgba(221,223,227,1) 80%,rgba(245,246,246,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f5f6f6', endColorstr='#f5f6f6',GradientType=0 ); /* IE6-9 */

希望这会有所帮助。

于 2012-12-01T01:52:16.957 回答
1

三件事：

  1. 从这个网站获取你的渐变 CSS：http: //www.colorzilla.com/gradient-editor/
  2. 更新您的边界半径以指定单位border-radius: 3px 3px：
  3. 添加#到您的边框颜色声明：border: 1px solid #BFBFBF;
于 2012-12-01T01:48:10.670 回答