sIFR 3 - 无法设置颜色、重量等样式
我正在尝试使用 sIFR 3。我正在让它工作并且可以做一些样式设置，例如更改字体大小。但如果我尝试改变颜色或重量，什么都不会改变。我不明白我在做什么，让某些样式起作用，而另一些则不起作用。
我的 html 是：
<html>
<head>
<title>Test sifr</title>
<link rel="stylesheet" href="sifr.css" type="text/css">
<script src="sifr.js" type="text/javascript"></script>
<script src="sifr-config.js" type="text/javascript"></script>
</head>
<body>
Starting...<br>
<span class='testsifr'>Testing #2</span><br><br>
Finished.<br>
</body>
</html>
我的 sIFR-config.js 是：
var gotham = { src: 'GothamMBLCond.swf' };
sIFR.activate(gotham);
sIFR.replace(gotham, {
selector: 'span.testsifr'
,css: [
'span.testsifr{ color:#0000FF; font-weight:bold;}'
]
});
我的 sIFR.js 是：
@media screen {
.sIFR-flash {
visibility: visible !important;
margin: 0;
padding: 0;
}
.sIFR-replaced, .sIFR-ignore {
visibility: visible !important;
}
.sIFR-alternate {
position: absolute;
left: 0;
top: 0;
width: 0;
height: 0;
display: block;
overflow: hidden;
}
.sIFR-replaced div.sIFR-fixfocus {
margin: 0pt;
padding: 0pt;
overflow: auto;
letter-spacing: 0px;
float: none;
}
}
@media print {
.sIFR-flash {
display : none !important;
height : 0;
width : 0;
position : absolute;
overflow : hidden;
}
.sIFR-alternate {
visibility : visible !important;
display : block !important;
position : static !important;
left : auto !important;
top : auto !important;
width : auto !important;
height : auto !important;
}
}
/*
Place CSS rules for to-be-replaced elements here. Prefix by .sIFR-active
so they only apply if sIFR is active. Make sure to limit the CSS to the screen
media type, in order not to have the printed text come out weird.
*/
@media screen {
.sIFR-active span.testsifr {
font-family: Verdana;
visibility: hidden;
font-size:48px;
color:#0000FF;
font-weight:bold;
}
}
正如我所说，它渲染得很好，但是是黑色，而不是蓝色，并且是常规粗细而不是粗体。我知道我指示它在 .js 和 .css 文件中变成蓝色/粗体，但我已经单独尝试了每个地方，并得到相同的结果。但我可以将大小从 48px 更改为其他值，并且字体大小更改确实生效。为什么我的颜色和颜色不会体重变化生效吗？有什么想法吗？
汤姆
I'm trying to use sIFR 3. I am getting it to work and can do some styling, such as changing the font size. But if I try to change the color or weight, nothing changes. I don't understand what I'm doing that allows some styling to work, and some not to.
My html is:
<html>
<head>
<title>Test sifr</title>
<link rel="stylesheet" href="sifr.css" type="text/css">
<script src="sifr.js" type="text/javascript"></script>
<script src="sifr-config.js" type="text/javascript"></script>
</head>
<body>
Starting...<br>
<span class='testsifr'>Testing #2</span><br><br>
Finished.<br>
</body>
</html>
My sIFR-config.js is:
var gotham = { src: 'GothamMBLCond.swf' };
sIFR.activate(gotham);
sIFR.replace(gotham, {
selector: 'span.testsifr'
,css: [
'span.testsifr{ color:#0000FF; font-weight:bold;}'
]
});
My sIFR.js is:
@media screen {
.sIFR-flash {
visibility: visible !important;
margin: 0;
padding: 0;
}
.sIFR-replaced, .sIFR-ignore {
visibility: visible !important;
}
.sIFR-alternate {
position: absolute;
left: 0;
top: 0;
width: 0;
height: 0;
display: block;
overflow: hidden;
}
.sIFR-replaced div.sIFR-fixfocus {
margin: 0pt;
padding: 0pt;
overflow: auto;
letter-spacing: 0px;
float: none;
}
}
@media print {
.sIFR-flash {
display : none !important;
height : 0;
width : 0;
position : absolute;
overflow : hidden;
}
.sIFR-alternate {
visibility : visible !important;
display : block !important;
position : static !important;
left : auto !important;
top : auto !important;
width : auto !important;
height : auto !important;
}
}
/*
Place CSS rules for to-be-replaced elements here. Prefix by .sIFR-active
so they only apply if sIFR is active. Make sure to limit the CSS to the screen
media type, in order not to have the printed text come out weird.
*/
@media screen {
.sIFR-active span.testsifr {
font-family: Verdana;
visibility: hidden;
font-size:48px;
color:#0000FF;
font-weight:bold;
}
}
As I say, it renders fine, but in black, instead of blue, and at regular weight instead of bold. I know I instruct it to go blue/bold in both the .js and the .css files, but I have tried each place singularly, and get the same results. But I can change the size from 48px to other values, and the font-size change DOES take effect. Why won't my color & weight changes take effect? Any ideas?
Tom
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
复制上面的代码，它会给你很多选择做什么;) 另外：我几乎从不使用 CSS 文件，我通常创建一个新的 CSS 文件，在其中手动纠正 flash 对象的位移，在你的情况下将是（例如）
Copy the code above, it will give you plenty of options what to do ;) Also: I hardly ever use the CSS-file, I usually create a new CSS-file where I manually correct displacements of the flash object , in your case that would be (for example)