我有一个XHTML严格页面,它有一个由Javascript控制的不可见div.div被设置为透明且可由脚本和鼠标悬停事件显示,以使div在悬停时不透明.
当有人使用浏览器(或带有noscript的firefox)而没有使用javascript时,div只会保持不可见.这个问题是我不希望内容无法访问.我也不想让div可见,然后使用脚本使其透明,因为div位于文档的底部,并且每当页面加载时它都会引起明显的闪烁.
我已经尝试使用noscript标签嵌入一个额外的样式表,该样式表仅为没有Javascript奢侈品的人加载但是这无法通过XHTML严格验证.有没有其他方法可以在XHTML有效的noscript块中包含额外的样式信息？
艾德:
通过一个简单的测试用例,我得到一个验证错误:文档类型不允许元素"样式"在这里. 这是一个空的XHTML Strict文档,在noscript元素中有一个样式元素.noscript在体内.
小智 67
头文件中的noscript是有效的HTML5.它之前无效.我刚刚测试过,它适用于当前的Firefox,Safari,Chrome,Opera和IE.
<!doctype html>
<html>
<head>
<noscript>
<style>body{background:red}</style>
</noscript>
</head>
<body>
<p>is this red? it should <script>document.writeln("not");</script> be. <noscript>indeed.</noscript></p>
</body>
</html>
Bob*_*ack 13
要清除验证问题:noscript只允许在body元素中,style只允许在head.因此,后者不允许在前者内.
关于一般问题:div默认情况下你想让元素可见,然后通过CSS + javascript隐藏它.这是"渐进增强"模型.我注意到你说你"因闪烁而不想这样做",但我不确定究竟是什么造成了这种情况 - 你有可能修复它,所以也许你应该把它作为一个问题发布.
And*_*ffy 11
使用script块head来添加style元素document.write:
<head>
...
<script type="text/javascript">
//<![CDATA[
document.write('<style type="text/css">.noscript{display:none}</style>');
//]]>
</script>
...
</head>
ren*_*irb 10
我意识到它是从2008年开始写的,我写了这篇文章
由于我有类似的问题,我想继续回答当前的答案.
就像Boby Jack所说的那样,style标签是不允许的.我自己就像你(约书亚)那样对待它.但杰克的"渐进式增强"让我没有非抽象的解决方案,但后来我意识到一个解决方案,我没有在这个线程上找到答案.
这完全取决于你的造型结构.
我的建议是明确地使用类似于modernizr头部开头的东西,并使用Paul Irish的HTML5Boilerplate建议.
class属性no-js.hide-me)display:none.no-js .hide-me { display:block }请参阅Paul Irish的HTML5boilerplate,如果您愿意,可以将其改编为XHTML :)
.no-js<!doctype html>
<!-- paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/ -->
<!--[if lt IE 7]> <html class="no-js ie6 oldie" lang="en"> <![endif]-->
<!--[if IE 7]> <html class="no-js ie7 oldie" lang="en"> <![endif]-->
<!--[if IE 8]> <html class="no-js ie8 oldie" lang="en"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
引用自 html5boilerplate.com
Modernizr执行将html使用支持的内容构建属性.
将构建类似于此的东西:
<html class=" js flexbox canvas canvastext webgl no-touch geolocation postmessage websqldatabase indexeddb hashchange history draganddrop websockets rgba hsla multiplebgs backgroundsize borderimage borderradius boxshadow textshadow opacity cssanimations csscolumns cssgradients cssreflections csstransforms csstransforms3d csstransitions fontface generatedcontent video audio localstorage sessionstorage webworkers applicationcache svg inlinesvg smil svgclippaths" lang="en">
请注意,这是来自Google Chrome modernizr测试.
第一个是js但如果Modernizr没有运行(没有javascript),no-js那么就会留在那里.
.hide-me)display:none......你知道其余的:)
| 归档时间： |
|
| 查看次数： |
36055 次 |
| 最近记录： |