0

何百ものJoyentの投稿とstackoverflowの質問を読んだことを約束します.コンマの置き忘れがなく、フラッシュがインストールされており、他の人にIEでページを試してもらったことを前置きします.

問題は、IE 6/7 では何もレンダリングされないことですが、IE8、FF、および Safari はすべて問題ありません。コードは次のとおりです。

//sIFR-config.js

var zapfino = { src: '/fonts/zapfino.swf' };

sIFR.fitExactly = true;
sIFR.useStyleCheck = true;
sIFR.useDomLoaded = true;

sIFR.activate(zapfino);

sIFR.replace(zapfino, {
  selector: 'h1, h2, h3, h4'
  ,css: '.sIFR-root { color: #1A2F35; }'
  ,forceSingleLine: true
  ,tuneWidth: 5
  ,wmode: 'transparent'
  ,filters: {
      DropShadow: {
        knockout: false
        ,distance: 3
        ,color: '#330000'
        ,strength: 1
        ,alpha: .45
      }
    }
  ,ratios: [7, 3.59, 9, 3.56, 10, 3.49, 12, 3.5, 13, 3.46, 20, 3.47, 23, 3.43, 26, 3.44, 34, 3.42, 40, 3.41, 42, 3.4, 45, 3.41, 47, 3.4, 49, 3.41, 69, 3.4, 71, 3.39, 72, 3.4, 76, 3.39, 77, 3.4, 3.39]  
});

/* sIFR.css */
@media screen {
    .sIFR-active h1, .sIFR-active h2, .sIFR-active h3, .sIFR-active h4 {
        visibility: hidden;
        font-family: Verdana;
        line-height: 1em;
        color: #ff0000;
    }
    .sIFR-dummy { 
        width: 0px;
        height: 0px;
        margin-left: 42px !important;
        z-index: 0;
    }    
}

<!-- HTML Snippet -->
<div id="header">
    <H1>H1 Example</H1>
    <h3>H3 Example</h3>
    <h2>H2 Example</h2>
    <h4>H4 Example</h4>
</div>

表示されるほぼすべてのオプションは、キャッシュのクリアなどを使用して、または使用せずに試したことに注意してください。また、メインの css は、h1-4 を div#header 内に絶対に配置します。これもコメントアウトしてみました。

編集: .sIFR-active クラスが に適用されることに注意してください。<html>したがって、スクリプトが起動していることはわかっていますが、ページ上の何も変更されていません。

また、さまざまなソースからさまざまなフォントを試しましたが、IE ではまだうまくいきません。

ティア、

ジェイ

4

1 に答える 1

1

IE6/7 では、フロートの隣にアブソリュートを配置すると、アブソリュートが消えることがあります。

あなたのcssでは、.1header左に浮かんでいて、すぐ後.header_textに絶対に配置されています。

.header_textposition:relative に設定してみてください。.1headerまたは、との間に空の div を配置し.header_textます。.header_textまたは、divを別の div でラップします。

ところで - CSS クラス名は、アンダースコア (_)、ダッシュ (-)、または文字 (az) で始まる必要があります。クラス名を数字で始めるのは無効ですが、この場合IEに違いがあるかどうかはわかりません。

コメントの後に追加

私はそれがcssの問題であることを確信しています。<h1>...<h4>#header_text の sifr で を削除します。を追加し<h1>test</h1>ます。CSS に「background-color:#00c;」を追加します。#header_text に。

ファイアフォックスで見てください。青色の背景に赤色のテストが表示されるはずです。IE を見てください。

#header_text で、position:absolute を position:relative に変更します。IE を見ると、青い背景の赤いテストが表示されるはずです (必要な場所ではありませんが、それは別の問題です)。

于 2009-06-02T23:38:33.653 に答える