我在 <html> 元素上使用 .js 和 .no-js 类来区分具有 Javascript 和不具有 Javascript 的布局。
使用 <html> 元素,我添加了一个默认类“no-js”。然后我在标题中包含一行脚本,document.getElementsByTagName("html")[0].setAttribute("class","js");
以将 html 类切换为“js”。显然这行代码只适用于启用了 js 的浏览器,因此 <html> 元素将变为 <html class="js"> 而未启用 js 的浏览器将继续读取 <html class="no-js" >。
然后我将简单地使用.js someElement{ font-weight:bold;}
vs.no-js someElement{ font-weight:normal;}
来设置不同的页面样式。
但是,我发现这种方法在 IE7 上失败了。在 IE7 上,该脚本有效——至少看起来如此。在开发者工具上,它显示 <html class="js">。但是,所有以 .js 开头的 css 样式都会被 IE7 忽略,并且 IE7 的行为就像 <html> 元素具有 .no-js 类一样。(查看http://bit.ly/LMre3N以获得更清晰的图片。)
我无法想象这里到底出了什么问题:这是 IE7 在呈现 CSS 时行为错误的情况,还是脚本无法正常工作的情况?这是我尝试过的:
CSS
- 更改 .js 和 .no-js 声明的顺序,因为我认为后者可能会覆盖导致问题的前者 - 不。
- 更改脚本和样式表的顺序,因为这可能是因为 IE7 在读取脚本之前读取了 .no-js 样式表 - 不。
- 更改声明的具体性——也许更具体会导致 IE7 读取 .js 声明——不。
- 从文档中完全删除 .no-js 类,希望 IE7 能够读取 .js 声明。NOPE - 它只是忽略 .no-js 和 .js 声明。
简而言之,IE7 完全完全忽略了存在 .js 声明的事实。所以我认为可能是脚本有问题,这就是我所做的:
Javascript
- 我在 <script> 中添加了 'type="text-javascript"' - 没有效果。
- 我试过
document.documentElement
而不是document.getElementsByTagName('html')[0]
- 还是一样。 - 我使用
var htmlOrWhat=document.getElementsByTagName("html")[0]; alert(htmlOrWhat);
了 、FF、Chrome、Opera、Safari、IE8 和 IE9 返回 '[object HTMLHtmlElement]',而 IE7 返回 [object],导致我认为 IE7 没有正确读取 <html> 元素。 - 然后我尝试读取 <html> 的 id 和 lang 属性来测试 IE7 是否真的正确读取了元素,是的,它正确地检索了这些属性,它只是简单地拒绝对其应用 .js css 声明。
到目前为止,我已经束手无策了(尽管我怀疑 [object] 异常与我的问题有关),我希望 Stackoverflow 的某个人能够帮助我。如果有人能在此处准确指出 IE7 有什么问题以及如何修复它,我将不胜感激。提前致谢。