0

FF は、一部の div でインポートされたフォントまたはグラデーションと境界線の半径を表示しませんが、その理由はよくわかりません。

サイトは次のとおりです。見出しのフォントは Arial Rounded MT Bold にする必要があります。中央の 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 グラデーション:

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

どんな助けでも大歓迎です..

**問題を修正しました-フォントフェイスが間違ったURLとborder-radius:0;でした。IEからMoz半径をキャンセルしました...

グラデーションには、文字間に余分なスペースがありました。何年も見ていたのに、突然見つけました..返信ありがとうございます。

4

3 に答える 3

2

@font-face私を狂ったと呼んでくださいが、宣言のフォントファミリ名を引用符のないものに変更しようとしましたか?

しようとするとどうなるか@font-face {font-family:arial-rounded-bold;src: url("/Fonts/ArialRoundedBold.ttf") format('truetype');}

例えば？

また... 4 つのフォント ファイルの @font-face 呼び出しのベスト プラクティス: SVG、WOFF、EOT、および TTF。どちらの Firefox が使用されているかはわかりませんが、ブラウザー間の互換性のために、TTF を他の形式に変換することを強くお勧めします。

ここでそれを行うことができます：

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

于 2012-08-25T16:18:37.653 に答える
1

少なくとも Internet Explorer 用の .EOT も含める必要がありますが、FF は ttf をサポートしており、font-face 構文は適切に見えます。FFでサイトを見ると、テキストがきれいに見えます。

ただ、グラデーションに関しては -moz- の書き方が間違っています。

-moz-linear-gradient(top, #EBEBEC, #lightGrey);意味がないので使用できません #lightGrey。は#それを 16 進コードで示します。

次のようになります。

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

そして、すべてのボーダー半径に使用しているクレイジーな構文の代わりに、次のようなものを使用する必要があります...

border-radius: Apx Bpx Cpx Dpx

...ここで、A は左上、B は右上、C は右下、D は左下のピクセルです。

そして、ブラウザごとにこれらのスタイルを何度も宣言する代わりに...

http://leaverou.github.com/prefixfree/でLea Verou の prefixfree.js を取得し、HTML の下部にあるスクリプトにリンクして、アクセスに使用しているブラウザーに応じて彼女の JavaScript にプレフィックスを追加させます。ページ。

于 2012-08-25T16:55:48.193 に答える
0

この間違いは問題の一部でしょうか?

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

それは次のとおりです。

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

「左」の後にセミコロンはありません

于 2012-08-25T16:27:26.733 に答える