css 对div用hover设置border，出现抖动和div走位问题，解决方法

css 对div用hover设置border，出现抖动和div走位问题，解决方法

样式设置 ： div:hover { border:1px solid red;} 当鼠标移动到div时，产生抖动和偏移。
产生的原因： 是因为设置border时设置了1px边框，多出的这1px，与其它元素产生了挤压， 导致div偏移。
解决方法： 第一种方法：是先将这个div设置一个跟背景颜色一样的边框，比如背景颜色为#aaa；那么你先设置这个div的样式：div {border:1px solid #aaa;}，然后再设置hover动作，div:hover { border:1px solid red;} 。第二种方法：将这个div的border颜色设置为透明
div {border:1px solid transparent;},然后再引入hover动作div:hover { border:1px solid red;} 。
使用outline代替border
使用box-sizing: border-box!important;