a标签嵌套img标签在IE7,8下显示带有蓝色边框border的解决方法
今天有同事问到我,为什么他的a标签嵌套img标签在IE8以下的浏览器显示会有个边框,怎么解决会好点?经过我做了个demo之后,发现,原来是浏览器本身的问题!
1.思考问题研究
- 会不会是text-decoration的问题(加上了none并不影响)
- 主要是在哪个浏览器的显示问题(IE7,8)
- img的border是浏览器加上的吗?(是的,IE自动加上的,而且是每个方位都加了border,通过开发者工具可看)
2.解决方法研究
- 既然是增加了border,那么可以通过设置加border:none解决。
- 测试之后,都没有显示上的问题。
3.代码附上
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>a嵌套img标签在ie下显示不正常</title>
<style>
a {
text-decoration: none;
}
a img {
border: none;
}
</style>
</head>
<body>
<a href="#"><img src="tusiji.jpg" alt=""></a>
</body>
</html>