【转】关于IE7 z-index问题完美解决方案
来源:http://jacobcookie.iteye.com/blog/1876426
浏览器兼容性问题太让人蛋疼了,今天可是废在了IE7的z-index问题上。可又不能因为浏览器版本低而不去解决,毕竟要从用户的角度着想。百度了好多还是无法解决,最后google了一下,找到了方法。
直接上例子:
Html代码代码:
<div id="container">
<div id="box1">This box should be on top</div>
</div>
<div id="box2">
This box should not be on top;
IE however seems to create a new stacking context for positioned elements,
even when the computed z-index of that element is 'auto'.
</div>
Css代码代码:
body { margin:; padding:; }
#container { position: relative;}
#box1 { position: absolute; top: 100px; left: 510px; width: 200px; height: 200px; background-color: yellow;z-index:; }
#box2 { position: absolute; top: 50px; left: 460px; width: 200px; height: 200px; background-color: lime; z-index:;}
效果:……(就是没有实现z-index所指的效果呵呵)
这是为什么呢?其实这是IE浏览器的一个BUG——在IE浏览器中,定位元素会产生一个新的stacking context,并且从z-index的值为0开始。所以我们需要在这个元素的父元素上设置一个更高的z-index值。
在上述的box1中的父元素container设置一个更大的z-index就能解决这个问题。
修改后的css代码代码:
body { margin:; padding:; }
#container { position: relative; z-index:;}
#box1 { position: absolute; top: 100px; left: 510px; width: 200px; height: 200px; background-color: yellow; }
//box1有没有z-index都无所谓了,但必须同position(relative或absolute)使用,就跟一个人
//生不了孩子一样,需要配合。
#box2 { position: absolute; top: 50px; left: 460px; width: 200px; height: 200px; background-color: lime; z-index:; }
效果:……(就是实现了z-index属性所指的效果了呵呵)
要想覆盖住父级的同级 ,父级的z-index就必须别的大,这就跟拼老爸一样,老爸强你就强,这就是传说中的哲学啊。
=================================================================
下面来自:http://blog.sina.com.cn/s/blog_77187555010133cv.html
=================================================================
================================================================
下面来自:http://zhidao.baidu.com/link?url=x0uD04htpjH7JnMVukwHI4cI-9X-2GkEqHKWb0z9y-OTHTujieKO5cI2tbLm0hxQSHgl-LekmaUz6POdT-k3C_
================================================================
E6和IE7有一个bug,如果只是对一个子元素设定z-index,这个值再高,也不能覆盖与父元素同级的其他元素。所以现在通用的解决方法是对子元素的父元素也定义一个z-index的值。例如这样
<body>
<div class="container">
<div class="test"></div>
</div> </body> 假如你已经定义了 .test {position:absolute; z-index:9999;},如果要让这个样式在IE6、IE7下面生效的话,就还要在container的div里面加一句:
.container {z-index:100;}
如果container还有一个父元素,就要在那个父元素上也定义一个z-index的值才行。。。
【转】关于IE7 z-index问题完美解决方案的更多相关文章
- Apache服务器网站访问伪静态内页出现No input file specified.的完美解决方案
原文地址:Apache服务器网站访问伪静态内页出现No input file specified.的完美解决方案 启用REWRITE的伪静态功能的时候,首页可以访问,而访问内页的时候,就提示:&quo ...
- 关于Entity Framework中的Attached报错的完美解决方案终极版
之前发表过一篇文章题为<关于Entity Framework中的Attached报错的完美解决方案>,那篇文章确实能解决单个实体在进行更新.删除时Attached的报错,注意我这里说的单个 ...
- ecshop之transport和jquery冲突之完美解决方案
众所周知:ecshop的transport.js文件和Jquery是冲突的,两个文件不能同时调用,现给出以下完美解决方案:原因分析:在transport.js文件中,大概 580行到590行之间,这个 ...
- .NET领域最为流行的IOC框架之一Autofac WebAPI2使用Autofac实现IOC属性注入完美解决方案 AutoFac容器初步
.NET领域最为流行的IOC框架之一Autofac 一.前言 Autofac是.NET领域最为流行的IOC框架之一,微软的Orchad开源程序使用的就是Autofac,Nopcommerce开源程 ...
- No resource found that matches the given name 'Theme.AppCompat.Light 的完美解决方案
No resource found that matches the given name 'Theme.AppCompat.Light 的完美解决方案 首先这个问题的产生是由于缺少Theme.App ...
- Xcode6.1标准Framework静态库制作方法。工程转Framework,静态库加xib和图片。完美解决方案。
http://www.cocoachina.com/bbs/read.php?tid-282490.html Xcode6.1标准Framework静态库制作方法.工程转Framework,静态库加x ...
- Safari 前端开发调试 iOS 完美解决方案
转http://www.2cto.com/kf/201403/283404.html afari 前端开发调试 iOS 完美解决方案 2014-03-05 0个评论 来源:Safari ...
- C#多线程解决界面卡死问题的完美解决方案
C#多线程解决界面卡死问题的完美解决方案 文章转自http://www.sufeinet.com/thread-3556-1-1.html 问题描述: 当我们的界面需要在程序运行中不断更新数据时, 当 ...
- 完美解决方案,可排除DATASET不支持System.Nullable错误
完美解决方案,可排除DATASET不支持System.Nullable错误 using System; using System.Collections.Generic; using System.L ...
- Android消息推送完美解决方案全析
推送功能在手机应用开发中越来越重要,已经成为手机开发的必须.在Android应用开发中,由于众所周知的原因,Android消息推送我们不得不大费周折.本文就是用来和大家共同探讨一种Android消息推 ...
随机推荐
- Linux内存管理之地址映射
写在前面:由于地址映射涉及到各种寄存器的设置访问,Linux对于不同体系结构处理器的地址映射采用不同的方法,例如对于i386及后来的32位的Intel的处理器在页式映射时采用的是2级页表映射,而对于I ...
- 数据库添加数据I
/*insert.php*/ <html> <head> <meta http-equiv="Content-Type" content=" ...
- 11、C#基础整理(特殊集合和哈希表)
特殊集合:队列.栈 一.栈Stack类:先进后出,没有索引 Stack ss = new Stack(); 1.增加数据:push :将元素推入集合 ss.Push(); ss.Push(); ss. ...
- [数据结构]RMQ问题小结
RMQ问题小结 by Wine93 2014.1.14 1.算法简介 RMQ问题可分成以下2种 (1)静态RMQ:ST算法 一旦给定序列确定后就不在更新,只查询区间最大(小)值!这类问题可以用倍增 ...
- Selenium - 封装WebDrivers (C#)
Web element仍然使用OpenQA.Selenium.IWebElement, 本类库将Selenium原装支持的各浏览器统一为OnDriver, 并将常用操作封装. using System ...
- Magento怎么设置和使用Cookie和Session?
Magento中cookie和session是已经封装了的 Magento的核心对象-Mage_Core_Model_Cookie & Mage_Core_Model_Session Mage ...
- .csproj文件的配置 IIS可以调试
<ProjectExtensions> <VisualStudio> <FlavorProperties GUID="{349c5851-65df-11da-9 ...
- eval函数的工作原理
如果您想详细了解eval和JSON请参考以下链接: eval :https://developer.mozilla.org/En/Core_JavaScript_1.5_Reference/Glob ...
- Maven构建项目速度慢问题解决
Maven项目进行构件的时候速度会很慢,由于maven每次进行创建的时候回去网上下载artheType-catalog.xml文件,而且,现在这个文件比较大,已经接近5M的大小,所以,在网速不好的情况 ...
- 关于limit hashlimit资料整理
这几天正在捣鼓防火墙,用到了hashlimit模块.Google了一圈发现相关的文档无论英文还 是中文都很少, 所以我就把自己的折腾的心得记录下来吧. hashlimit是iptables的一个匹配模 ...