Избыточный я знаю, но SIFR в IE 6/7 выпуска - PullRequest
Новая
       11

Избыточный я знаю, но SIFR в IE 6/7 выпуска

0 голосов
/ 28 мая 2009

Обещаю, я прочитал сотни постов Joyent и вопросы по stackoverflow, и я предвосхищу это, говоря, что уверен, что у меня нет незапятых запятых, и у меня установлена ​​флэш-память, а другие пробовали страницу в IE. 1001 *

Проблема в том, что в 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 #, который я также пытался комментировать.

РЕДАКТИРОВАТЬ: Обратите внимание, что класс .sIFR-active применяется к <html>, поэтому я знаю, что скрипт запускается, но кроме этого ничего на странице не изменяется.

Я также пробовал разные шрифты из разных источников, но в IE все еще не повезло.

ТИА,

Jay

1 Ответ

1 голос
/ 03 июня 2009

Иногда в IE6 / 7, когда абсолютное число располагается рядом с плавающей точкой, абсолютное значение исчезает.

В вашем css у вас есть .1header с плавающей точкой слева и сразу после .header_text позиционируется абсолют.

Попробуйте установить .header_text в положение: относительное. Или поместите пустой div между .1header и .header_text. Или заверните div .header_text в другой div.

Кстати: имена классов CSS должны начинаться с подчеркивания (_), тире (-) или буквы (a-z). Неверно начинать имя класса с цифры, но я не знаю, имеет ли это значение для IE в этом случае или нет.

Добавлено после комментариев

Я почти уверен, что это проблема css. Удалите <h1>...<h4> с сифром в #header_text. Добавьте <h1>test</h1>. В CSS добавьте 'background-color: # 00c;' на #header_text.

Посмотрите на это в Firefox. Вы должны увидеть красный тест на синем фоне. Посмотрите в IE, вы не будете.

On #header_text изменить положение: абсолютное положение: относительное. Посмотрите в IE, красный тест с синим фоном должен появиться (не там, где вы хотите, но это другая проблема).

...