`
zhouyrt
  • 浏览: 1159120 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

firefox下绝对定位元素重叠造成不可点击问题

FirefoxIECSSHTML
阅读更多

重构地图网站过程中碰到的，firefox下（无论诡异模式或标准模式）当两个绝对定位的div发生重叠（即一个div盖在另一个div上）时，下面的div变得不可点击了。解决的方法是设置z-index，z-index值大的就可以点击了。而IE下，即使z-index值高的div，下面的div中的button仍然可以点击。

 

如下htmlbug重现：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>02.html</title>
	
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=gbk">

	<style type="text/css">
		#d1{
			position:absolute;
			top:31%;
			left:41%;
			width:200px;
			height:100px;
			border:1px solid gray;
			padding:5px;
			/*z-index:1;*/
		}
		#d2{
			position:absolute;
			top:30%;
			left:40%;
			width:230px;
			height:130px;			
			border:1px solid red;
			/*z-index:2;*/
		}
		
	</style>
  </head>
  
  <body>
   
		<div id="d1">
			<input type="button" value="查询" onclick="alert(3);">
		</div>
		<div id="d2"></div>
		
  </body>
</html>

 

可以试着修改两个div的z-index在firefox和IE下测试下。

 

 

  • 02.rar (529 Bytes)
  • 下载次数: 4
0
顶
0
踩
分享到：
| IE6双空白边bug
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    css3pointer-event介绍.docx

    这个属性在处理用户界面时特别有用，特别是在有多个重叠元素或者需要阻止某些元素响应鼠标事件的情况下。通过调整 `pointer-events` 的值，我们可以控制元素是否能够成为鼠标事件的目标。 `pointer-events` 的主要...

    web前端面试题

    - **浏览器**: 测试过的浏览器通常包括Chrome、Firefox、Safari、Edge以及IE等。 - **内核**: - Chrome 和 Edge 使用的是 Blink 内核； - Firefox 使用的是 Gecko 内核； - Safari 使用的是 WebKit 内核； - IE ...

    css 遮罩样式（支持IE和FireFox）

    CSS（层叠样式表）是一种用于描述网页呈现样式的语言，它定义了如何在屏幕、纸张、语音或其他媒体...在实际开发中，维护一套全面的浏览器兼容性测试环境是必不可少的，它可以帮助开发者及时发现并解决样式兼容性问题。

    HTML+CSS布局、规范、兼容

    IE和Firefox对容器高度限定的处理不同，因此不推荐轻易给容器设置固定高度。对于可能横向内容超出的情况，需为浮动容器指定宽度。清除浮动在不同浏览器中的方法也有所差异，需要根据具体情况进行处理。IE6存在一个...

    前端面试题汇总

    - **absolute** 定位元素脱离正常文档流，相对于最近的非 static 定位祖先元素定位。 - 正常流中的元素按照文档顺序排列。 **48. position与其他CSS特性的交互** - **position** 会影响元素的位置、堆叠顺序和容器...

    前端面试汇总

    - **与overflow**: overflow:hidden可以限制绝对定位元素的位置。 - **与float**: 浮动元素不会影响绝对定位元素的位置。 以上涵盖了《前端面试汇总》文档中提到的知识点，并进行了详细的解释和扩展。这些知识点...

    div+css有实例,易学易懂

    - **非浮动内容和容器的问题**：在IE6和Firefox2下的差异。 - **使用:after伪类解决浮动的问题**：在不同浏览器中的表现。 - **嵌套元素宽度和高度叠中的问题**：子元素对父元素的影响。 - **子元素负边界的问题**：...

    IE6-IE11兼容性问题列表及解决办法.rar

    在IT行业中，尤其是在Web开发领域，浏览器兼容性一直是一个重要的考虑因素...同时，随着IE浏览器市场份额的减少，现代浏览器如Chrome、Firefox、Edge等已得到更广泛的支持，开发时也应优先考虑这些浏览器的标准兼容性。

    KODExplorer 芒果云-资源管理器

    - 右键菜单在最下面时，右键位置重叠导致点击菜单问题 - 编辑器打开文件时光标问题，处理：移动到行尾；编辑器enter建不显示自动提示 - iframe 打开url 优化。解决canvas问题 - 文件编辑器,载入loading去掉 - ...

    div+css布局中常用方法汇总.docx

    24. **表单样式问题**：在Firefox中，左浮动的`&lt;label&gt;`会使后面的`&lt;input&gt;`上移，可以通过清除父元素`text-indent`来解决。 25. **图片与padding的处理**：避免在图片上直接设置`padding`，而是将其定义在包裹的`...

    面试宝典指南大全

    主流浏览器包括但不限于Chrome、Firefox、Internet Explorer（IE）、Safari和Opera。它们的内核分别是Blink（或WebKit）、Gecko、Trident（或EdgeHTML）、WebKit和Blink。 2. **Doctype声明与浏览器模式** ...

    尚硅谷_前端_面试题

    常见的浏览器内核包括：WebKit（Safari、Chrome）、Gecko（Firefox）、Blink（基于WebKit改进，用于Chrome和Opera）。 5. **简述一下你对HTML语义化的理解？** - **HTML语义化**指的是使用有意义的HTML标签来构建...

    CSS运用的二十四则技巧

    12. **负`margin`与定位**：负`margin`在绝对定位时可以起到相对定位的效果，常用于居中对齐和层叠元素。 13. **单像素边框**：使用`border-collapse: collapse;`和`border`属性实现单像素边框，以避免边框重叠的...

    li 自适应，栏目分割（负margin，兼容所有浏览器）

    5. **调试工具**：熟悉并使用浏览器开发者工具（如Chrome DevTools或Firefox Developer Tools）进行样式调试，查看元素盒模型，实时修改CSS，有助于快速定位和解决问题。 6. **源码示例**：学习开源代码和示例是...

    前端面试题汇总.pdf

    28. **定位和层叠上下文**：CSS中的定位分为静态定位、相对定位、绝对定位和固定定位等；层叠上下文决定了元素如何重叠。 29. **基本语句构成**：CSS基本语句包括选择器、属性和值。 30. **缓存处理**：浏览器缓存...

    dreamweaver试题考试题.doc

    19. 浏览Web网页需要使用浏览器（Browser）软件，如Chrome、Firefox等。 20. 图像链接点击事件通常由OnClick触发，当用户点击图像时执行相应代码。 21. 表格单元格（Cell）中不仅可以输入文字，还可以插入图片，...

    HTML5和CSS3设计模式

    - 介绍了一些常见问题的解决方法，如元素重叠、对齐不准确等。 9. **第9章：定位：高级** - 探讨了更复杂的定位场景，如多列布局、响应式设计等。 - 提供了一些高级定位技巧，帮助开发者应对复杂布局挑战。 10...

    H5 面试题总结

    - **Firefox**: Gecko 内核 - **Safari**: WebKit 内核 - **Internet Explorer (IE)**: Trident 内核 - **Edge (旧版)**: EdgeHTML 内核 - **Edge (新版)**: Blink 内核 ##### 2. Doctype 的作用 文档类型声明 (`...

    web 开发 css 必看

    当首选字体不可用时，浏览器会使用备选字体或默认的字体系列。 2. **字体大小 (`font-size`)**: 控制字体的大小，如 `font-size: 16px;` 或 `font-size: 1.2em;`。`em` 是相对单位，基于父元素的字体大小。 3. **...

Magicbox
Global site tag (gtag.js) - Google Analytics