多行排列图片时hover上去加边框挤图片的解决方法

在遇到多行多列排列的图片时，当鼠标悬停（hover）上去添加边框，可能会意外地将图片周围的布局挤开，这在狼蚁网站的SEO优化图片中尤为明显。尤其在使用IE11及以下版本的浏览器时，加载图片默认会为其添加一个1px的边框，这对于布局设计来说是一大挑战。

为了解决这一问题，我们可以采取以下策略：

一、透明边框设置法：这是一种推荐的解决方案。对元素设置一个透明的边框。当鼠标悬停时，边框颜色变为可见。代码如下：

对于HTML结构为 `

```css

li {

border: 2px solid transparent;

}

li:hover {

border: 2px solid red;

}

```

二、包裹层法：另一种方法是在元素外部再包裹一层div。这样做可以确保在鼠标悬停时，边框不会影响到内部的布局。修改后的HTML结构如下：

`

```css

li {

width: 468px;

}

div {

width: 468px;

margin: 2px;

padding: 10px;

background-color: fff;

}

div:hover {

margin: 0;

border: 2px solid red;

}

```