您现在的位置是：网站首页> 编程资料编程资料

多行排列图片时hover上去加边框挤图片的解决方法兼容IE7+设置div背景透明的方法示例CSS实现div不设高度完全居中div自适应高度自动填充剩余高度详解DIV+CSS的命名规矩才能有利于SEO优化的实现方法DIV或者DIV里面的图片水平与垂直居中的方法详解如何用div实现自制滚动条div对齐与网页布局详解DIV+CSS实现电台列表设计的示例代码div+css实现带箭头的面包屑导航栏不定宽高的文字在div中垂直居中实现方法

2021-09-06 834人已围观

简介在布局时，想必大家都有遇到这样的情况，就是多行多列排列的图片时，hover上去加边框会把下面的图片挤到别处，解决方法很简单，对图片设置border:none就可以了

问题：

遇到多行多列排列的图片时，hover上去加边框会把下面的图片挤到别处

============================================================

注意：

IE11以下浏览器加载图片会默认给它加一个1px的边框

解决方法：对图片设置border:none

=============================================================

hover加边框解决方案：

原先：

复制代码

代码如下:

1. 对元素设置透明边框（推荐）：

复制代码

代码如下:

li{
border:2px solid transparent;
}
li:hover{
border:2px solid red;
}

2. 对元素外再包裹一层div

更改后：

复制代码

代码如下:

样式：

复制代码

代码如下: