什么问题在这会ie7 z index 失效问题

来源：蜘蛛抓取(WebSpider) 时间：2016-07-24 17:55 标签： 索引失效问题

可选中1个或多个下面的关键词，搜索相关资料。也可直接点“搜索资料”搜索整个问题。

版权声明：本文为博主原创文章，未经博主允许不得转载。 /qq_/article/details/

4. 文本图标对齐与定位

5. 高度自适应的九宫格效果

绝对定位的拉伸受限于父级，想要做到拉伸效果，必须给父级设置高度。

7. 使用绝对定位实现整体布局

此时头部尾部都是fixed效果，不跟随滚动。避免了移动端position:fixed实现的诸多问题。

  • 宽度设计机制，IE7浏览器把100%宽度算成了外部容器的宽度，滚动条一出现整个容器的可利用面积是会被压缩的，外部容器的宽度减少，于是，在IE7上就出现了水平滚动条。此时应删除宽度100%；

(2) 解决水平居中跳动问题的修复：

100% -可用内容宽度；

overflow与BFC（block formatting context，块级格式化上下文，相当于页面之结界，内部元素再怎么翻云覆雨都不会影响外部）

左浮动，右overflow，推荐使用浮动元素撑开间距


失效原因：绝对定位元素不总是被父级overflow属性裁剪，尤其当overflow在绝对定位元素及其包含块之间的时候。（包含块是指“含position：relative/absolute/fixed声明的父级元素，没有则body元素。”）

(1) overflow元素自身为包含块（自身增加包含块元素）

(2) overflow元素的子元素为包含块（子集增加包含块）

5.1. 锚点定位的本质：改变容器的滚动高度

应用于：单页页面，兼容IE6,IE7

此时，2，4div中的z-index不再起作用，以1，3中的为主

新建层叠上下文与层级控制

相对自身位置改变，不会影响其他元素的位置

top与bottom，left与right是斗争关系其中之一起作用另一个就无效

将需要定位的元素独立出一个div，避免层级层叠问题

层叠上下文（stacking context）是html元素中的三维概念，表示元素在z轴上有了“可以高人一等”。

(1) 页面根元素天生具有层叠上下文，称为“根层叠上下文”

(2) z-index值为数值的定位元素也具有层叠上下文

层叠上下文中的每个元素都有一个层叠水平（stacking level），决定了同一个层叠上下文中元素在z轴上的显示顺序。遵循“后来居上”和“谁大谁上”的层叠准则。

层叠水平和z-index不是一个东西。普通元素也有层叠水平，但是只有定位元素才有z-index。

层叠上下文可以嵌套，组合成一个分层次的层叠上下文。每个层叠上下文和兄弟元素独立：当进行层叠变化或渲染的时候，只需要考虑后代元素。

每个层叠上下文是自成体系的：当元素的内容被层叠后，整个元素被认为是在父层的层叠顺序中。

2.3. 层叠顺序：元素发生层叠时候有着特定的垂直显示顺序。



(3) z-index层叠顺序的比较止步于父级层叠上下文

3. 其他属性与层叠上下文

目的：避免z-index混乱，一山比一山高的样式问题

做法：对于非浮层元素，避免设置z-index值，灵活运用后来居上，层叠上下文，层叠水平这些准测，z-index值不能超过2。

目的：避免浮层组件因z-index被覆盖的问题

(1) 总会有意想不到的高层级元素

(2) 组建的覆盖规则具有动态性

(3) 做法：组件层级计数器（通过JS获得body下子元素的最大z-index）

行高决定内联盒子高度；行间距墙头草，可大可小（甚至赋值），保证高度正好等同于行高。

body全局数值行高经验

重阅读如博客，推荐1.5，1.6

数值：在baseline对其基础上上下偏移对应数值大小。

只应用于inline水平元素和table-cell元素（默认状态下，图片、文字、按钮、单元格）

注意HTML要写成以下形式：

inline boxes盒子1没有任何内容，此时本盒子的基线是底边缘

box元素的基线作为它自己的基线，此时文字的基线是x-baseline的下边缘。两个基线对齐就产生了如图效果。

table-cell元素：单元格填充盒子相对于外面的表格行居中对齐

所以设置行高大于图片高度，再设垂直居中的时候是近似的。

盒子的顶部/底部和父级的content area的顶部/底部对齐。

实际运用：主要用于表情图片（或原始尺寸背景图标）与文字的对齐效果。

使用基线图标片上，使用顶线/底线的问题在于受其他内联元素影响，造成巨大的定位偏差；使用中线需要恰好的字体大小以及兼容性要求不高；使用文本底部比较合适，不受行高以及其他内联元素影响；

vertical-align:sub降低盒子的基线到父级合适的下标基线位置。

8.2. 不定尺寸图片或多行文字的垂直居中

有些同学在自己制作网站时，出现网站在火狐浏览器、谷歌浏览器显示正常，但在IE6、IE7浏览器却出现移位，错乱的现象，这就是由于网站对IE6、IE7浏览器不兼容造成的。

如何解决自己做网站时出现IE6、IE7浏览器不兼容的问题呢？下面是几个常见的IE6、IE7浏览器不兼容网站的解决方法：【使用以下的方法之前，需了解HTML和CSS，如果不了解，请学习和】

1：li边距“无故”增加

任何事情都是有原因的，li边距也不例外。

先描述一下具体状况：有些时候li边距会突然增 加很多，值也不固定（只在IE6/IE7有这种现象），让人摸不着头脑，仔细“研究”发现是由于其低级元素ul的padding引 起，padding的上下值对li有影响，左右无影 响。

所以只好笨手笨脚地把padding去掉，换成margin。这是能解决问题，但往往不是我们想要的结果，或许 还会引起其他不必要的怪现象。

现在终于发现解决这个问题的方法，其实很简单，既然是有ul引 起的，就设置ul的显示形式为*display:inline-block;即可，前面加*是只 针对IE6/IE7有效，其他浏览器并不渲染这个属性。

2：分页数字 字体用“Arial ”加粗不抖动

结果IE6童鞋喜笑颜开，春光灿烂：

20：链接去边线（完全兼容）

每一列都会向右产生外边距4px，苦思不得其解，尝试负的外边距，但是涉及到其他的问题:每个li标签会重叠1-2个px，妨碍到鼠标hover 状 态的事件。

我要回帖

更多关于 索引失效问题 的文章

 

随机推荐