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>1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253

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;         }   }12345678910111213141516171819

遇到的主要问题是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> 1234

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

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属性失效问题解决

知其然，知其所以然。