Html FF不接受CSS

FF不会在一些div上显示导入的字体或渐变和边框半径，但我真的不知道为什么

，其中标题的字体应为Arial圆角MT粗体，中间h2渐变不显示，左右导航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;}

例如，“目录”的左上方导航标题应具有边界半径：

#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;}

非常感谢您的帮助

**我修复了问题-fontface是错误的URL&边界半径：0；从IE中取消了Moz半径

---

渐变在字符之间有一个额外的空间。我看了很久，突然发现了他们。。谢谢您的回复。

叫我疯了，但是您是否尝试过将

@font-face

声明中的字体系列名称更改为不带引号的名称

如果您尝试使用

@font-face{font-family:arial圆角粗体；src:url（“/Fonts/ArialRoundedBold.ttf”）格式（'truetype'）；}

比如说

还有。。。@font-face的最佳实践需要四个字体文件：SVG、WOFF、EOT和TTF。我不确定firefox使用哪种格式，但为了跨浏览器兼容性，我郑重建议您将TTF转换为其他格式

您可以在此处执行此操作：

---

叫我疯了，但是您是否尝试过将

@font-face

声明中的字体系列名称更改为不带引号的名称

如果您尝试使用

@font-face{font-family:arial圆角粗体；src:url（“/Fonts/ArialRoundedBold.ttf”）格式（'truetype'）；}

比如说

还有。。。@font-face的最佳实践需要四个字体文件：SVG、WOFF、EOT和TTF。我不确定firefox使用哪种格式，但为了跨浏览器兼容性，我郑重建议您将TTF转换为其他格式

您可以在此处执行此操作：

---

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

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

如果是：

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

---

“left”后面没有分号

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

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

如果是：

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

---

“left”后面没有分号。

虽然您至少还应该为Internet explorer包含一个.EOT，但FF确实支持ttf，并且您的字体语法看起来是正确的。当我在FF中查看站点时，文本看起来很好

至于梯度，但是，moz写错了

你有

-moz线性梯度（顶部，#EBEBEC，#浅灰色）并且您不能使用
#lightGrey
，因为这没有意义。
#
将其表示为十六进制代码

应该是这样的：

-moz线性梯度（顶部，#ebebec 0%，#cccc 100%）

而不是疯狂的语法，你正在使用所有的边界半径，你应该使用像

边界半径：Apx Bpx Cpx Dpx

…其中A是您想要的左上角像素，B是右上角，C是右下角，D是左下角

而不是为每个浏览器一遍又一遍地声明这些样式

去获取Lea Verou的prefixfree.js，链接到html底部的脚本，让她的JavaScript为您添加前缀，具体取决于您访问页面时使用的浏览器。
虽然您至少还应该为Internet explorer包含一个.EOT，但FF确实支持ttf，并且您的字体语法看起来很正确。当我在FF中查看站点时，文本看起来很好

至于梯度，但是，moz写错了

你有
-moz线性梯度（顶部，#EBEBEC，#浅灰色）并且您不能使用
#lightGrey
，因为这没有意义。
#
将其表示为十六进制代码

应该是这样的：

-moz线性梯度（顶部，#ebebec 0%，#cccc 100%）

而不是疯狂的语法，你正在使用所有的边界半径，你应该使用像

边界半径：Apx Bpx Cpx Dpx

…其中A是您想要的左上角像素，B是右上角，C是右下角，D是左下角

而不是为每个浏览器一遍又一遍地声明这些样式

去获取Lea Verou的prefixfree.js，链接到html底部的脚本，让她的JavaScript根据访问页面时使用的浏览器为您添加前缀