css hover后内容出现抖动解决方法

原创 ardee 随笔 css 333阅读 2017-05-31 18:33:01 举报

遇到的主要问题是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经常会出现无效的情况,之前有遇到过,在这里也总结一下。

margin-top失效
网上能找到的两种比较靠谱的解释:

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

评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复