多行图片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

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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏自动化测试实战

HTML第三课——css【3】

29712
来自专栏河湾欢儿的专栏

表单

form 表单 <input type="…… " name="" value="" /> text 文本框 passwor...

1002
来自专栏自动化测试实战

html——css基础

上一节我们讲了display的inline-block属性,但是我们在工作中很少用,因为这个属性对于IE7版本以下IE浏览器不兼容。我们一般用float: le...

4975
来自专栏小樱的经验随笔

【Android开发学习笔记之一】5大布局方式详解

Android中常用的5大布局方式有以下几种: 线性布局(LinearLayout):按照垂直或者水平方向布局的组件。 帧布局(FrameLayout):组件从...

3458
来自专栏菜鸟计划

CSS布局(五) 网页布局方式

网页实质是块与块之间的位置,块挨着块,块嵌套块,块叠着块。 三种关系:相邻,嵌套,重叠。 下面介绍网页布局的常用几种方式 ? 1.一列布局: 一般都是固定的宽高...

3996
来自专栏前端知识分享

第141天:前端开发中浏览器兼容性问题总结(二)

在浏览器中想要垂直居中,设置vertical-align:middle; 不起作用。例如:ie6下文本与文本输入框对不齐,需设置vertical-align:m...

2222
来自专栏web前端-

JQ事件和事件对象

  //mouseover()/mouseout()和mouseenter()/mouseleave()的区别

2882
来自专栏前端知识分享

第56天:选中文字弹出提示框

所以这个的事件一定是  onmouseup  ,盒子显示而且盒子的位置 在  鼠标的 clientX 和 clientY 一模一样

1522
来自专栏JavaEdge

CSS 全解析实战(二)-HTML基础强化1 HTML常见元素和理解(1)2 HTML常见元素和理解(2)3 HTML常见元素和理解(3)4 HTML版本5 元素分类6 嵌套关系

851
来自专栏腾讯NEXT学位

CSS布局解决方案(上)

3114

扫码关注云+社区

领取腾讯云代金券