难题:
遇到多行两列排序的照片时,hover上去加边框会把下面的照片挤到别处
============================================================
留意:
IE11下列访问器载入照片会默认设置给它加1个1px的边框
处理方式:对照片设定border:none
=============================================================
hover加边框处理计划方案:
本来:
<li>
<img />
<h3></h3>
<p></p>
</li>
1. 对元素设定全透明边框(强烈推荐):
li{
border:2px solid transparent;
}
li:hover{
border:2px solid red;
}
2. 对元素外再包裹1层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