`
pmfou_site
  • 浏览: 30117 次
  • 性别: Icon_minigender_1
  • 来自: 广州
社区版块
存档分类
最新评论

解决FLASH与DIV覆盖遮挡以及FF无法显示innerHTML等元素的方法

 
阅读更多
1,描述
一段倒计时的JS脚本,参见我上篇文章,在美工添加了flash后,出现DIV层被FLASH遮挡的问题,应该说这是个经典问题,我也是找了半天找到了不同浏览器下FLASH、DIV的遮挡解决办法;
网上有用CSS:z-index来解决问题,但其实效果不好
真正的解决方法是:
对于IE,对与<object>中添加如下标签:<param name="wmode" value="transparent">,值得说明的是value的值不止一种,有需要可以网上搜寻;
对于FF和CHROME,上面设置是没有效果的,需要在<embed>标签中添加如下属性:wmode="transparent";
从此完美解决了

示例: 请仔细察看添加的两个参数。
2,新的问题
这次的项目中,按照上面方法确实解决了IE和CHROME下的问题,但是在FF下依然无法显示倒计时<div>,奇怪的是在上次项目中,是完全解决的,在FF也是正常的,以至于我把问题着眼点放在了flash和div层的遮挡上来,网上搜寻半天,无所查获。
一篇文章提点了我:
来看一下本来的代码:
LiveClock.innerHTML = "现在离"+symbol+"结束还有"+hour2+"小时"+minute2+"分"+second2+"秒" ;
没有用Jquery库;
这段代码在IE和CHROME下都是正常的,在火狐下却无法显示倒计时;
在百思不的其解,先后以为是FF对innerHTML片段支持不好,在网上也发现了一些关于这方面的BUG和一些解决方法,但是没有解决我的问题;

后来发现真正的代码是:
document.getElementById("LiveClock").innerHTML = "现在离"+symbol+"结束还有"+hour2+"小时"+minute2+"分"+second2+"秒";
看出了没有
居然是这个原因,在FF下,定位标签必须是getElementById方法,在IE和CHROME下完全正常,这掩盖的代码的问题,按照严格的W3C文档来说,确实火狐是正确的,但是显得比较死板。
而且在测试代码功能的时候,其实我还试了FF,完全是正常的,那时候也没有用getElementById,但是显示也是正常的,后来明白,测试功能的时候,没有过于复杂的HTML标签,就一个div框,所以没有发现这个问题。

可能有用的一些文章:http://huangyunbin.iteye.com/blog/1110675
http://hi.baidu.com/cylic12345/blog/item/01c4b6c9ff654710be09e621.html
http://www.ittang.com/2010/0128/10682.html
3,修改添加3秒倒计时功能(待添加)
分享到:
评论

相关推荐

    python的xpath获取div标签内html内容,实现innerhtml功能的方法

    python的xpath没有获取div标签内html内容的功能,也就是获取div或a标签中的innerhtml,写了个小程序实现一下: 源代码 [webadmin@centos7 csdnd4q] #162&gt; vim /mywork/python/csdnd4q/z040.py #去掉最外层标签,...

    html div没有被撑开的原因及解决办法

    `div`中的内容如果是内联元素(如`&lt;span&gt;`, `&lt;a&gt;`等),它们默认不会影响`div`的高度。此时,需要确保内联元素转换为块级元素或设置`div`的高度。 **解决方案:** 1. 将内联元素转换为块级元素,如`display: block;...

    23.(leaflet篇)leaflet叠加html(leaflet叠加div元素).zip

    通过`latLngToContainerPoint`方法,我们可以将地图上的地理坐标转换为像素坐标,从而确定div在地图上的位置。 总的来说,Leaflet虽然不直接支持HTML元素的叠加,但通过`L.divIcon`和对DOM的操作,我们可以灵活地在...

    利用innerHTML实现隐显效果-两种实现方法

    本文将探讨如何利用innerHTML实现页面元素的隐藏与显示效果,同时提供两种不同的实现方法。 首先,我们需要理解innerHTML的工作原理。innerHTML允许我们获取或设置一个元素的所有子节点,包括文本、HTML标签等。当...

    js innerHTML 改变div内容的方法

    在这个案例中,当用户改变下拉列表的选择时,页面上的`&lt;div&gt;`元素内容会更新,显示用户所选的值。 ### 结论 `innerHTML`属性是JavaScript中非常强大的工具,它允许开发者动态地控制页面内容。通过合理使用`...

    IE6/7/8中使用innerHTML清空元素,其子元素也被清空

    在IT行业中,尤其是在前端开发领域,我们经常遇到与浏览器兼容性相关的问题。本文将深入探讨一个特定的问题,即在Internet Explorer 6、7和8(以下简称IE6/7/8)浏览器中使用`innerHTML`属性清空元素时,其子元素也...

    js实现获取div坐标的方法

    在本文中,我们将深入探讨如何使用JavaScript来获取页面中div元素的坐标。这是一项基础且实用的技术,在Web开发中经常会用到,尤其是在进行DOM操作、实现自定义的交互效果或开发动画时,获取元素的位置信息是必不可...

    让div滚动条初始化到最低位置的三种方法

    以上三种方法都可以有效地解决让`div`滚动条初始化到最低位置的问题。每种方法都有其适用场景: - **点击事件模拟滚动**:适用于需要模拟用户行为的场景。 - **`scrollIntoView`方法**:适用于现代浏览器环境,代码...

    div内容转成图片格式

    2. **复制div到canvas**:由于`canvas`无法直接将`div`内容绘入,我们需要先将`div`的CSS样式转换为内联样式,然后使用`innerHTML`或`outerHTML`将`div`的内容插入到`canvas`的`getContext('2d')`的绘图环境中。...

    解决ajax返回innerHTML中javascript不能运行问题

    要解决这个问题,最基本的方法就是需要让浏览器可以同时解析 `&lt;div&gt;` 标签中的 js。如果单适用 IE 浏览器,最简单的方式就是在 `&lt;div&gt;` 中的 `&lt;script&gt;` 标签中添加属性 `defer`,它可以通知 IE 该脚本需要异步解析...

    innerHtml(转)

    这篇博客文章(链接已提供但无法直接访问)可能深入探讨了`innerHTML`的工作原理,以及如何在实际编程中有效利用它。博客作者可能讨论了以下知识点: 1. **innerHTML的基本用法**:如何通过`innerHTML`读取和修改...

    js中innerHTML与innerText的用法与区别

    ### JavaScript中的innerHTML与innerText的用法与区别 在前端开发中,经常需要用到JavaScript来操作DOM元素,其中`innerHTML`和`innerText`是非常重要的属性,它们分别用于获取或设置元素内部的HTML内容和纯文本...

    点击页面链接后根据参数调用后台方法,获取数据并显示数据到弹出div上

    在网页开发中,实现“点击页面链接后根据参数调用后台方法,获取数据并显示数据到弹出div上”的功能,通常涉及到前端JavaScript技术、AJAX异步请求以及后端接口设计。以下将详细讲解这一过程中的关键知识点。 1. **...

    关于在innerHTML中JS不执行的问题

    为了解决这个问题,我们可以采用以下几种方法: 1. **使用`document.createElement`和`element.appendChild`**:这种方法创建和操作DOM元素是安全的,因为它不会直接解析HTML字符串。例如,如果你有`&lt;script&gt;`标签...

    innerHTML和innerText的区别

    内嵌 HTML 和文本内容的获取方法 在 JavaScript 中,innerHTML 和 innerText 是两个常用的属性,它们用于获取 HTML 元素中的内容。虽然它们都是用于获取内容的,但它们在获取内容的方式和结果上有所不同。 ...

    Js Div属性大全

    2. align:设置或获取Div元素的对齐方式,可以是"left", "right", "center", "justify"等,用于调整元素在页面上的位置。 3. atomicselection:指定元素及其内容是否可以作为一个不可见单位被选中,通常用于编辑器...

    js限制DIV输入回车

    至于标签“限制DIV输入回车”,这个标签很好地概括了我们要解决的问题,即限制或改变`div`元素内的回车键行为。在WebSite2压缩包文件中,可能包含了一个完整的示例项目,包含了实现这一功能的HTML、CSS和JavaScript...

    innerHTML-outerHTML-innerTEXT.txt

    根据提供的文件信息,我们可以深入探讨三个重要的DOM属性:`innerHTML`、`innerText`以及`outerHTML`。这些属性在Web开发中非常关键,用于获取或设置元素内部的内容。接下来将详细解析这些属性的功能、用途及差异。 ...

Global site tag (gtag.js) - Google Analytics