Question

FF不会显示导入的字体或渐变＆amp;某些div上的border-radius，但我真的不确定原因。

Here's the site，其中标题的字体应为Arial Rounded MT Bold，中间的h2渐变不显示，右边＆amp;左侧导航div和标题的边界半径应为5px，并且Twitter语音气泡无法正确显示。

如果有人可以与Chrome进行比较，那就太棒了，这应该是它的样子......

这是字体的CSS：

@font-face {font-family:'Arial Rounded MT Bold';src: url("/Fonts/ArialRoundedBold.ttf") format('truetype');}
@font-face {font-family:'Arial Rounded MT Light';src: url("/Fonts/ArialRoundedLight.ttf") format('truetype');}

未显示的H2中间渐变：

#middle h2 {margin-bottom:5px;color:#293346;font-size:22px;padding:3px 2.3%;background:-webkit-gradient(linear, left top, left bottom, from(#EBEBEC), to(lightGrey));background: -moz-linear-gradient(top,  #EBEBEC,  #lightGrey);filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#EBEBEC', endColorstr='#dcdcdc');border:1px solid #d5d5d5;-webkit-border-top-right-radius: 10px;-webkit-border-top-left-radius: 10px;-moz-border-radius-topright: 10px;-moz-border-radius-topleft: 10px;border-top-right-radius: 10px;border-top-left-radius: 10px;}

“目录”的左上角导航标题，例如应该有一个border-radius：

#left-nav .quickjump h2 {border:1px solid #4D535C;padding:2px 0;background:#676E79;color:#fff;text-shadow:0 1px 0 #5d5e80;font-size:14px;border-top-right-radius:0;border-top-left-radius:0;-webkit-border-top-right-radius: 5px;-webkit-border-top-left-radius: 5px;-moz-border-radius-topright: 5px;-moz-border-radius-topleft: 5px;text-indent:10px;-webkit-gradient(linear, left top, left bottom, from(#808792), to(#727A86));background: -moz-linear-gradient(top,  #808792,  #727A86);filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#808792', endColorstr='#727A86');}

右侧导航语音泡沫，“语音”位未正确显示：

.twtr-tweet {
    background-color: #Ffffff !important;
    border-radius: 5px;
    box-shadow: 0 0 6px #777777;
    display: inline-block;
    padding: 10px 18px;
    position: relative;
    vertical-align: top;float: left; !important;
    width:60%;}

.twtr-tweet::before {
    background-color: #Ffffff;
    content: "\00a0";
    display: block;
    height: 16px;
    position: absolute;
    top: 11px;
    transform:             rotate( 29deg ) skew( -35deg );
        -moz-transform:    rotate( 29deg ) skew( -35deg );
        -ms-transform:     rotate( 29deg ) skew( -35deg );
        -o-transform:      rotate( 29deg ) skew( -35deg );
        -webkit-transform: rotate( 29deg ) skew( -35deg );
    width:  20px;
}
#tweet-id-1 {float: left;margin: 5px 10%;}
#tweet-id-1::before {box-shadow: -2px 2px 2px 0 rgba( 178, 178, 178, .4 );left: -9px;}
#tweet-id-2 {float: right;margin: 5px 10%;}
#tweet-id-2::before {box-shadow: 2px -2px 2px 0 rgba( 178, 178, 178, .4 );right: -9px;}
#tweet-id-3 {float: left;margin:5px 10%;}
#tweet-id-3::before {box-shadow: -2px 2px 2px 0 rgba( 178, 178, 178, .4 );left: -9px;}
#tweet-id-4 {float: right;margin: 5px 10%;}
#tweet-id-4::before {box-shadow: 2px -2px 2px 0 rgba( 178, 178, 178, .4 );right: -9px;}

非常感谢任何帮助..

**我修复了问题 - 字体是错误的URL＆amp; border-radius：0;从IE取消了Moz半径...

渐变在角色之间有一个额外的空间。已经看了很久，然后突然发现了它们..感谢你的回复。

Answer 1

让我发疯，但您是否尝试将@font-face声明中的字体系列名称更改为而不带引号？

如果您尝试@font-face {font-family:arial-rounded-bold;src: url("/Fonts/ArialRoundedBold.ttf") format('truetype');}

会发生什么

例如？

另外...... @ font-face调用四个字体文件的最佳做法：SVG，WOFF，EOT和TTF。我不确定firefox使用哪一个，但为了跨浏览器兼容性，我会认真推荐将您的TTF转换为其他格式。

你可以在这里做到：

http://www.fontsquirrel.com/fontface/generator

Answer 2

虽然你至少应该包括一个用于Internet Explorer的.EOT，但FF确实支持ttf，并且你的font-face语法看起来正确。当我在FF中查看网站时，文字看起来很好。

然而，对于渐变，-moz-写错了。

你有 -moz-linear-gradient(top, #EBEBEC, #lightGrey);并且您无法使用#lightGrey，因为这没有意义。 #表示它是十六进制代码。

应该是这样的：

-moz-linear-gradient(top, #ebebec 0%, #cccccc 100%);

而不是你用于所有border-radius的疯狂语法，你应该只使用像......

border-radius: Apx Bpx Cpx Dpx

...其中A是你想要左上角的像素，B是右上角，C是右下角，D是左下角。

然后不是为每个浏览器一遍又一遍地声明每个样式......

在http://leaverou.github.com/prefixfree/获取Lea Verou的prefixfree.js，链接到html底部的脚本，让她的JavaScript为你添加前缀，具体取决于用于访问页面的浏览器。 / p>

Answer 3

这个错误可能是这个问题的一部分吗？

 vertical-align: top;float: left; !important;

应该是：

vertical-align: top;
float:left !important;

'left'后没有分号

FF不挑选CSS

3 个答案: