hover效果加边框不抖动

前两天遇到一个hover效果给整个div加边框的问题。

html 如下

 <div class="hot-recommend">
        <div class="wrapper">
            <div class="offer-list">
                <ul class='underline'>
                    <li class="offer-list-item  fd-clr">
                        <!-- <h3 class="title">今日热推</h3> -->
                        <div class="offer-feature">
                            <dl class="fea1">
                                <dt><a href="">外形小巧<i class="dot"></i></a></dt>
                                <dd><a href="">轻盈有触感，数字清晰</a></dd>
                            </dl>
                            <dl class="fea3">
                                <dt><a href="">超大屏幕<i class="dot"></i></a></dt>
                                <dd><a href="">不锈钢笔尖圆润耐磨书写360°顺滑流畅</a></dd>
                            </dl>
                        </div>
                        <div class="offer-pic">
                            <a href="#" title="#" target=""><img src='http://wd.alibaba-inc.com/i/260-260.png' alt=''/></a></a>
                            <i class='sold-out'></i>
                            <p class="text">已抢完<span>sold out</span></a></p>
                        </div>
                        <div class="offer-feature">
                            <dl class="fea2 ">
                                <dt><i class="dot "></i>大按键</a></dt>
                                <dd>墨水仓可视窗口方便观察墨量</a></dd>
                            </dl><dl class="fea4">
                                <dt><i class="dot"></i>双电源</a></dt>
                                <dd>直液式控墨系统出墨匀保证用完最后一滴</a></dd>
                            </dl>
                        </div>
                        <div class="offer-detail">
                            <dl class="offer-introduce">
                                <dt class='offer-title'><span>deli/得力 837ES 经济型太阳能双电源计算器</span><i ></i></dt>
                                <dd class='offer-slogan'>7月7日雨，白雪直液式中性笔今日首发。9.8一盒含泪卖，比圆珠笔更低的价格，走珠笔的顺滑手感，你值得拥有！和圆珠笔说拜拜~</dd>
                            </dl>
                            <p class="timeout"><i class='timeout-icon'></i><span>限时特惠 <span class="month"></span>月<span class="day"></span>天<span class="hour"></span>小时<span class="minute"></span>分钟<span class="second"></span>秒</span></p>
                            <p class="offer-price">
                                <span class="price-cur"><i class="fd-cny">&yen;</i><span class="split"><em>555.99</em></span><i class="unit">/个</i></span>
                                <span class="price-old"><i class="fd-cny">&yen;</i><strike>163.00<i class="unit">/个</strike></i></span>
                                <i class="tax-icon"></i>
                            </p>
                            <p class="offer-count">
                                <span class="sale"><span class='sale-count'>53</span><i class="unit">个</i>已售</span>
                                <i class='space'> | </i>
                                <span class="inventory">剩余<span class='inventory-count'>222</span><i class="unit">个</i>库存</span>
                            </p>
                            <a class="buy" href="" target="" title="">立即抢购</a>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
    </div>

less文件

.offer-list{
        &:hover{
            border:solid 2px #027CFF;
            height:372px;
            margin: -1px -2px 0-2px;
            .offer-list-item{
                margin-top: -1px;
            }
        }
        .underline{
            border-bottom: solid 1px #e3e3e3;
        }
        ul{
            margin-left: 10px;
        }
        .offer-list-item{
            height: 372px;
        }
  }

遇到的主要问题是hover后文字抖动，并且边框不能完美覆盖之前每个div下部的分割线。
解决方案：
1 遮挡分割线，整个加hover的div上移1px。
2 解决抖动问题，减少div的height。

方向是这两个，但是.first-list 的margin上移带来了其他问题，就是虽然高度设了，但hover时还是会向下掉1px。

这个问题找了好久，发现原来外层div margin为负时，并不会把这个div块都带着移动，里层的li就没有跟着移动，所以出现了怎么调都还是会看到div块向下抖动的问题，并且下边框还出现了遮住1px的问题。问题是ul层也没有设置overflow：hidden。

后来想到了给li用一个margin：-1px。两个问题一起解决啦。不过下边框被遮住的应该是是因为div设置的高度值问题。
其实有种比较简单的解决方法，那就是hover之前给div加白色边框占位，hover改变border颜色。这样很简单，但是不够通用，在这里就用不了，因为页面上有一个div的左上角有一个背景图片，白色的边框会在上面留下痕迹。没办法用。

margin经常会出现无效的情况，之前有遇到过，在这里也总结一下。

1. margin-top失效

<div> 
<divclassdivclass="box1">float:left</div> 
<divclassdivclass="box2">clear:both;margin-top:20px;</div> 
</div> 

网上能找到的两种比较靠谱的解释：

1：“在CSS2.1中，水平的margin不会被折叠；垂直margin可能在一些盒模型中被折叠…”
2：当第一个层浮动，而第二个没浮动层的margin会被压缩，详见--浮动元素后非浮动元素的margin的处理。
得到解决问题思路：1一起浮动 2 两个div中间加一个div清除浮动。

2父元素里第一个子元素margin-top失效。它会默认为是父元素的margin。
解决办法：
1.给父容器box加overflow:hidden;属性
2.父容器box加border除none以外的属性
3.用父容器box的padding-top代替margin-top

参考文章：CSS中margin-top属性失效问题解决

知其然，知其所以然。