• 博客园logo
  • 会员
  • 众包
  • 新闻
  • 博问
  • 闪存
  • 赞助商
  • HarmonyOS
  • Chat2DB
    • 搜索
      所有博客
    • 搜索
      当前博客
  • 写随笔 我的博客 短消息 简洁模式
    用户头像
    我的博客 我的园子 账号设置 会员中心 简洁模式 ... 退出登录
    注册 登录
山高我为峰
博客园    首页    新随笔    联系   管理    订阅  订阅
设置了width和height的a元素在IE11与IE11以下浏览器中的不同渲染方式
#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中包含内容,把它撑出来

posted on 2016-01-13 15:19  山高我为峰  阅读(1373)  评论(0)    收藏  举报
刷新页面返回顶部
博客园  ©  2004-2025
浙公网安备 33010602011771号 浙ICP备2021040463号-3