IE9下鼠标滑到</li>标签时，<ul>长度会莫名变长，并且<li>消失，仅在IE9下有此BUG

Question

问题描述：IE9下鼠标滑到</li>标签时，<ul>长度会莫名变长，并且<li>消失，仅在IE9下有此BUG
效果如下：

代码如下：
CSS代码

.manage-content {
    display: table-cell;
    width: 992px;
    max-width: 992px;
    padding-bottom: 30px;
    font-size: 14px;
    vertical-align: top;
}
.manage-content .padding {
    position: relative;
    padding: 0 30px;
}

...省略部分无关代码...

.list li{ 
    width:23%; 
    float:left; 
    background:#FFF; 
    border:solid 1px #ddd; 
    line-height:30px; 
    margin:10px 1%;
}
.list li.nothing{ 
    width:100%; 
    float:inherit; 
    border:0; 
    line-height:50px; 
    text-align:center; 
    margin:10px auto;
}
.list li p{ 
    padding:10px; 
    white-space:nowrap; 
    overflow:hidden;
    width: 100%;
    text-overflow: ellipsis;
}

html代码

<div class="manage-content">
    <div class="info padding clearfix">
        <ul class="list clearfix nlist" style="width:100%;">
            <li>
                <p>
                    姓名：　　<span title="店长姓">店长姓</span><br />
                    联系方式：<span title="13333333333">13333333333</span><br />
                </p>
                <div class="sbtn del" data-id="member_id">
                    <span class="icon-merge icon"></span>
                </div>
            </li>
        </ul>
    </div>
</div>

注：info没有样式

Answer 1

你首先要明白你写的每一个样式的意义，你是想.manage-content作为容器，然后再添加一层div包裹，而第一层的宽度已知，高度由子元素撑开，第二个div没给，问题可能出现在style="width:100%;",ul的上一层div宽度没给，那么就是父元素的宽度，也就是992px,ul的宽度，也就是992px，而且它的父元素给自己左右30px内边距，而你又在行内样式设置ul width=100%,此时width=932px,你这样慢慢理清思路，问题应该就解决了，给你几个tip

1. 要明白样式的作用顺序还有css权重，具体的你可以看一下这一片文章css权重

2. 盒子模型的理解，宽高的计算，以及浮动的影响