正文

设置了width和height的a元素在IE11与IE11以下浏览器中的不同渲染方式

IP云
IP云V管理员/5 阅读
07/24
提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

#welcomeMiddleBtn {
display: block;
width: 73px;
height: 120px;
margin: 0px auto;
}<a id="welcomeMiddleBtn" href="${basePath}/files/test.zip">
<img src="${basePath}/images/welcome/transparent.png" border="0"></img><!--为了兼容IE11以下的版本，这里用个透明图片撑一下a元素 -->
</a>

在上面的CSS样式中，我们给a元素设置成了块元素，并且设置了width和height；

在火狐，谷歌浏览器以及IE11浏览器中这个a元素都可以正常的渲染为一个有width和height块级元素

但是在IE11以下的版本，就会有问题，IE在渲染它时，由于a元素中未包含内容，就算CSS已经设置了width和height，IE依然不会把它渲染出来，这就导致没法点击到该

解决方案：就是在a中包含内容，把它撑出来