0

我在我的页面上的几个按钮上使用了 webfont（多边形）。在 firefox 中，一切看起来都是正确的，但在 Chrome 中，尽管使用了相同的 CSS3 代码，但第一个按钮的字体似乎比其他按钮的字体更粗（除非我错过了一个错字）。

http://ashgavs.cloudant.com/site/_design/AshGavsCouch/betcha/index.html

这就是页面，查看登录与使用 facebook 登录或注册。影响字体粗细的不是文本的长度，已经测试过了。

这是第一个和第二个按钮的 CSS：

     #login{
        position: absolute;
        top: 137px;
        left: 19px;
        padding-top: 10px;
        padding-bottom: 10px;
        border-top: 1px solid #aff797;
        background: #369942;
        background: -webkit-gradient(linear, left top, left bottom, from(#27ca3d), to(#369942));
        background: -webkit-linear-gradient(top, #27ca3d, #369942);
        background: -moz-linear-gradient(top, #27ca3d, #369942);
        background: -ms-linear-gradient(top, #27ca3d, #369942);
        background: -o-linear-gradient(top, #27ca3d, #369942);
        -webkit-border-radius: 11px;
        -moz-border-radius: 11px;
        border-radius: 5px;
        -webkit-box-shadow: rgba(0,0,0,.7) 0 1px 0;
        -moz-box-shadow: rgba(0,0,0,.7) 0 1px 0;
        box-shadow: rgba(0,0,0,.7) 0 1px 0;
        text-shadow: 0 1px 0 #91d99a;
        color: #0e5817;
        font-size: 24px;
        font-family: 'Poly', serif;
        text-decoration: none;
        vertical-align: center;
        width: 229px;
    }

    #loginFB{
        position: absolute;
        top: 196px;
        left: 19px;
        padding-top: 10px;
        padding-bottom: 10px;
        border-top: 1px solid #65a9d7;
        background: #3e779d;
        background: -webkit-gradient(linear, left top, left bottom, from(#65a9d7), to(#3e779d));
        background: -webkit-linear-gradient(top, #65a9d7, #3e779d);
        background: -moz-linear-gradient(top, #65a9d7, #3e779d);
        background: -ms-linear-gradient(top, #65a9d7, #3e779d);
        background: -o-linear-gradient(top, #65a9d7, #3e779d);
        -webkit-border-radius: 11px;
        -moz-border-radius: 11px;
        border-radius: 5px;
        -webkit-box-shadow: rgba(0,0,0,.7) 0 1px 0;
        -moz-box-shadow: rgba(0,0,0,.7) 0 1px 0;
        box-shadow: rgba(0,0,0,.7) 0 1px 0;
        text-shadow: 0 1px 0 #7ca9c7;
        color: #0e3458;
        font-size: 24px;
        font-family: 'Poly', serif;
        text-decoration: none;
        vertical-align: center;
        width: 229px;
      }

两个按钮都从相同的 div 继承属性，所以这也不是问题。谢谢。——阿什利

4

1 回答 1

0

它可能与您的特定浏览器有关。无论如何，一件非常好的事情（现在几乎是一个要求）是在您自己的 CSS 定义之前添加一个 CSS 重置。只需谷歌“CSS重置”。你会看到很多结果。基本上它会删除浏览器特定的格式，以便您的 CSS 是页面上唯一有效的格式。没有来自浏览器的意外更改或添加。通常这样做会解决您描述的各种问题。您可能想研究浏览器的特性，但为了节省时间，请先尝试重置。

于 2012-08-12T18:11:47.450 回答