今天小编跟大家讲解下有关多行排列图片时hover上去加边框挤图片的解决方法兼容IE7+ ,相信小伙伴们对这个话题应该有所关注吧,小编也收集到了有关多行排列图片时hover上去加边框挤图片的解决方法兼容IE7+ 的相关资料,希望小伙伴们看了有所帮助。
问题: 遇到多行多列排列的图片时 hover上去加边框会把下面的图片挤到别处 ============================================================ 注意: IE11以下浏览器加载图片会默认给它加一个1px的边框 解决方法:对图片设置border:none ============================================================= hover加边框解决方案: 原先: 复制代码代码如下: <li> <img /> <h3></h3> <p></p> </li> 1. 对元素设置透明边框(推荐): 复制代码代码如下: li{ border:2px solid transparent; } li:hover{ border:2px solid red; } 2. 对元素外再包裹一层div 更改后: 复制代码代码如下: <li> <div> <img /> <h3></h3> <p></p> </div> </li> 样式: 复制代码代码如下: li{ wdith:468px; } div{ width:468px; margin:2px; padding:10px; background-color:#fff; } div :hover{ margin:0; border:2px solid red; } 另外: 使用outline IE 7、8 不支持。 但它是显示在元素上面不会对元素加边框。不考虑IE兼容的可以直接用outline代替border来源:爱蒂网