首页
学习
活动
专区
圈层
工具
发布
社区首页 >问答首页 >我知道这是多余的,但是IE 6/7中的sIFR问题

我知道这是多余的,但是IE 6/7中的sIFR问题
EN

Stack Overflow用户
提问于 2009-05-28 13:51:39
回答 1查看 1.3K关注 0票数 0

我保证,我已经阅读了数以百计的Joyent帖子和stackoverflow问题,我会在开始之前说,我确信我没有放错逗号,安装了flash,并让其他人在IE中尝试过该页面。

问题是在IE6/7中没有任何渲染,但IE8、FF和Safari都很好。代码如下:

代码语言:javascript
复制
//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绝对在div#header中定位h1-4,我也尝试将其注释掉。

编辑:请注意,.sIFR-active类应用于<html>,因此我知道脚本正在触发,但除此之外,页面上没有任何变化。

我也尝试过来自不同来源的不同字体,在IE中仍然没有成功。

蒂娅

杰伦

EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2009-06-02 23:38:34

有时在IE6/7中,当绝对数定位在浮点数旁边时,绝对数会消失。

在你的css中,你让.1header向左浮动,紧跟在.header_text之后的是绝对位置。

尝试将.header_text设置为position:relative。或者在.1header.header_text之间放置一个空的div。或者将div .header_text包装在另一个div中。

BTW - CSS类名称必须以下划线(_)、破折号(-)或字母(a-z)开头。以数字开头的类名是无效的,但我不知道在这种情况下这对IE是否有影响。

在注释后添加

我很确定这是一个css问题。在#header_text中删除带有sifr的<h1>...<h4>。添加<h1>test</h1>。在CSS中,在#header_text上添加'background-color:#00c;‘。

在firefox中查看它。您应该会看到蓝色背景上的红色测试。在IE中,你不会的。

在#header_text上将position:absolute更改为position:relative。在IE中,蓝色背景的红色测试应该会出现(不是你想要的地方,但那是另一个问题)。

票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/920947

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档