问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
开发者社区
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

ie7元素hover鼠标滑过，具有translate属性的元素他的margin属性失效了是什么原因？

头像
clonger
    18186389
    头像
    toBeTheLight
      16.6k41634

      如题，在ie7下示例项目中鼠标划过的时候，li左偏移，并不是静止不动。不符合逻辑啊，虽然知道是li的z-index导致的，去掉就行了，或者将transform换成margin-top也行，可以避免此情况，但是问题产生的根源是什么呢？用现有的W3c标准解释不通呢？如果说是li：hover下具有transform属性的元素z-index层级比兄弟节点定义的z-index要大，导致元素上浮，左边距失效的话，不符合逻辑啊。将translate3d(0,-10px,0);换成margin-top不会出现此情况，但是tranform怎么会在ie下有效
      效果图如下：
      图片描述

      代码如下：

      <!doctype html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>test</title>
    <style type="text/css">
    *{
        margin:0;
        padding:0;
    }
    .prize-list {
        width: 1300px;
        margin: 0 auto;
        clear: both;
        padding-top: 30px;
    }
    .prize-list ul {
        height: 320px;
        position: relative;
        list-style: none;
    }    
    .prize-list li {
        position: relative;
        float: left;
        width: 286px;
        height: 320px;
        margin-left: 15px;
        background: #fff;
        z-index: 1;
        -webkit-transition: all .15s linear;
        transition: all .15s linear;
        background: #1c5297;
        border: 1px solid #f00;
    }   
    .prize-list li:hover {
        z-index: 2;
        -webkit-transform: translate3d(0, -10px, 0);
        -ms-transform: translate3d(0, -10px, 0);
        transform: translate3d(0, -10px, 0);
    }
    </style>
</head>
<body>
    <div class="prize-list">
        <ul class="clfix">
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </div>
</body>
</html>
      csshtml
      阅读 2.9k
      1 个回答
      得票最新
      头像
      toBeTheLight
        16.6k41634

        把你的demo精简了一下，不算答案，但是贴评论太多了。

        <!DOCTYPE HTML>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>test</title>
    <style type="text/css">
    *{
        margin:0;
        padding:0;
    }
    .prize-list {
        width: 1300px;
        margin: 0 auto;
        clear: both;
        padding-top: 30px;
    }
    .prize-list ul {
        height: 320px;
        position: relative;
        list-style: none;
    }    
    .prize-list li {
        position: relative;
        float: left;
        width: 286px;
        height: 320px;
        margin: 100px;
        background: #1c5297;
    }
    </style>
</head>
<body>
 <script src="http://libs.baidu.com/jquery/1.7.2/jquery.min.js"></script>
    <div class="prize-list">
        <ul class="clfix">
            <li></li>
            <li class="test"></li>
        </ul>
        <button>button</button>
    </div>
    <script type="text/javascript">
        $('button')[0].onclick = function () {
          $('.test')[0].style.zIndex = 200
        }
    </script>
</body>
</html>

        我没用hover做测试，而是js动态改变元素的z-index(不等于原有的z-index就行)。会发现一个现象，margin-left失效(只是左右失效了，上下并没有)。
        然后将元素的relative和float:left去掉一个现象就消失了。absolute没观察到也可能是我改的不对。
        大概就是左右浮动和relative定位在改变z-index时会有布局冲突？

        补充：

        1. transform并没有生效;

        2. 生活这么美好干嘛研究ie7呢。

        撰写回答
        你尚未登录，登录后可以
        • 和开发者交流问题的细节
        • 关注并接收问题和回答的更新提醒
        • 参与内容的编辑和改进，让解决方法与时俱进
        推荐问题