一、jQuery 发布 1.9 正式版，最后支持 IE 6/7/8,2.0以上的版本都不支持这三个浏览器了。

二、小箭头的写法与旋转切换（一直以为这样的只以切图片，原来未必哦。）

<style>* {margin: 0;padding: 0;}i, s {font-style: normal;}.box {width: 50px;height: 50px;background: lightpink;margin: 200px auto;position: relative;}.ci-right {top: 12px;right: 8px;height: 7px;overflow: hidden;font: 400 15px/15px consolas;color: #6A6A6A;display: block;position: absolute;}.ci-right s {position: relative;top: -7px;text-decoration: none;}.ci-right:hover{transform: rotate(180deg); transition: transform .1s ease-in 0s;}</style>

<div class="box"><i class="ci-right"><s>◇</s></i>
</div>

三、ie7下z-index失效问题解决方法

绝对定位元素的“有定位属性（relative或absolute）的父元素”在渲染层次时起到了主要作用，前面的被后面的覆盖了。解决办法就是给有定位属性的父元素设置z-index。

解决办法：

父级元素加上position:relative;并设置z-index.
父级元素的z-index优先，其中包含的元素的z-index是相对于父级元素的index.
<div style="position:relative;z-index=2">
<p style="position:absolute;z-index=99"> ...(要在上层显示的内容）</p>
<div>
<div style="position:relative;z-index=1">
...
<div>

上面的例子中，倘若将第一个div的z-index设置为-1，则无论p的z-index为多少，多会被下面的div遮住。
相反，倘若下层div的z-index也设置成2，ie7正在解释时，会按照"position:relative"的层的顺序，自动叠加，即实际值是3.
没有加position属性时，所有值继承自父级。

在ie7下，如下代码会出现z-index覆盖混乱的问题：

<div style="position:relative;">
<div style="position:absolute;z-index:100;width:100px;height:100px;background:red;"></div>
</div>
<div style="position:relative;">
<div style="position:absolute;z-index:10;width:20px;height:20px;background:black;"></div>
</div>

ie7下显示为：

黑色到了红色的上面。

这是因为绝对定位元素的“有定位属性（relative或absolute）的父元素”在渲染层次时起到了主要作用，前面的被后面的覆盖了。

解决办法就是给有定位属性的父元素设置z-index：

<div style="position:relative;z-index:2;">
<div style="position:absolute;z-index:100;width:100px;height:100px;background:red;"></div>
</div>
<div style="position:relative;z-index:1;">
<div style="position:absolute;z-index:10;width:20px;height:20px;background:black;"></div>
</div>

这样就可以正常显示了：

转载于:https://www.cnblogs.com/xuemingyao/p/5788646.html

小箭头的写法，z-index在ie7显示混乱问题相关推荐

一个select元素自定义设计的新思路：appearance: none之后利用符号制造小箭头
最近工作时解决了一个前端小问题(如下图所示):在Safari中,select的控件之上有不和谐的灰色部分. 刚开始时我以为是backgrand或是border设置不当之类产生的问题,在搜索了很久之后终 ...
HTML中z index属性是用来,css中z-index 属性与用法详解
Z-index属性决定了一个HTML元素的层叠级别.元素层叠级别是相对于元素在Z轴上(与X轴Y轴相对照)的位置而言.一个更高的Z-index值意味着这个元素在叠层顺序中会更靠近顶部.这个层叠顺序沿着垂 ...
input输入框为number类型时，去掉上下小箭头
input输入框type为number时,去掉上下小箭头,方式如下: <input type="number" ...><style>/* 在Chrome浏 ...
【AS3代码】隐藏原有鼠标箭头，并自定义鼠标小箭头
package { import flash.display.Sprite; import flash.events.Event; import flash.ui.Mouse; ...
用CSS写出一个下拉菜单小箭头
向右小箭头 width: 13px; height: 13px; border: 1px solid #0F1520; border-top: none; border-left: none; tra ...
如何处理Android Studio 上面关于 update 和 commit 小箭头的消失
问题: android studio 在关联 SVN 或者 git 服务后,会在工具栏出现 update 和 commit 小箭头如图: 但是,有时你打开工程的时候,发现这两个小箭头却消失不见了如 ...
listview 每行后面的小箭头_几个简单而有用的电脑小知识
1: 怎么用批处理文件删除桌面快捷菜单的小箭头? A:在电脑记事本中,复制以下内容并保存为.bat 后缀名文件,保存在桌面双击运行即可清除快捷菜单的小箭头! @ECHO OFF reg delete ...
去除win7桌面快捷方式小箭头
1.去除win7桌面快捷方式小箭头,复制下面代码,使用管理员身份在CMD下运行 reg add "HKEY_LOCAL_MACHINE\SOFTWARE\Microsoft\Windows\ ...
word取消下一页_word文档页码设置及文中小箭头清除办法
在很长一段时间里,朋友圈流传的这样一段话:世人慌慌张张,不过图碎银几两:可偏偏就是这几两碎银,能免饥荒,能定安康 ,能解世人惆怅... 问:word怎么从第二页开始加页码答:施工方案可以先删除自动生 ...

小箭头的写法，z-index在ie7显示混乱问题

一、jQuery 发布 1.9 正式版，最后支持 IE 6/7/8,2.0以上的版本都不支持这三个浏览器了。

小箭头的写法，z-index在ie7显示混乱问题相关推荐

最新文章

热门文章