前段时间在写样式的时候发现了这个问题，虽然当时就解决了这个 bug 不过还是记录下，以免再次出现这样的问题。

demo 代码：

<!doctype html>

<html lang="en">

<head>

    <meta charset="UTF-8"/>

    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>

    <meta name="renderer" content="webkit"/>

    <meta name="keywords" content=""/>

    <meta name="description" content=""/>

    <title>a:hover 设置上下边框在 ie6 和 ie7 下失效</title>

    <style>

    a{text-decoration:none;}

    a:hover{color:#f00;border:2px solid orange;}

    </style>

</head>

<body>

    <a href="javascript:;">a:hover 设置上下边框在 ie6 和 ie7 下失效</a>

</body>

</html>

通过 demo 我们可以发现，在 ie6 和 ie7 浏览器中，鼠标移上去上下边框不显示只有左右边框显示，而其他浏览器都是正常显示，为什么呢？

因为 a 标签在 ie6 和 ie7 中 hasLayout 属性为 false，至于何为 hasLayout？请百度，这里我就不多说了。

既然知道了是 hasLayout 的问题，那么只需要设置 hasLayout 就行了，设置的方法有很多，下面就列出常用的 2 种方法：

a:hover{position:relative;}

a:hover{zoom:;}

PS：

ie 下 80% 的 bug 都是由于元素没有 hasLayout 所造成的，所以如果在 ie 下碰到难以解释的问题，第一件事情要做的就是给该元素添加 hasLayout。

【css】a:hover 设置上下边框在 ie6 和 ie7 下失效的更多相关文章

  1. margin-bottom在IE6和IE7下失效的解决办法

    IE6/7下margin-bottom无效一般出现在容器里某元素设置后在父容器内无效,这个时候只需要在父容器中加入以下两句css,基本上所有的浏览器都兼容了: overflow:hidden;zoom ...

  2. 隐藏input边框（ie6、ie7）

    去掉元素的边框,我们一贯使用border:none; 但在ie6.ie7下的input[type=text]元素,并没有去掉. 两种解决方案: 1. border:none; 并设置背景backgro ...

  3. 【css】ie6 和 ie7 下 position 与 overflow 的问题

    前几天做的项目中碰到这样一个问题,在 ie6 和 ie7 下,给父元素设置 overflow:hidden 不起作用无法隐藏,后来发现是子元素中有设置 position:relative,如果子元素删 ...

  4. li中包含span，在IE6、IE7下会有3pxbug

    如果给每个li里面加个span标签的话,在IE6,IE7下看,li与li之间的距离就会多了3px. 解决方法:在li中加vertical-align:middle; <div class=&qu ...

  5. ie6、ie7下overflow失效

    如果父对象有overflow:hidden属性,子对象中的position属性是relative或者absolute, 那么在ie6和ie7下父对象的overflow会失效,解决办法是给父对象加rel ...

  6. css中hover设置边框后div中内容后移解决方法

    <style> .demo{width:1200px;height:400px;background:#fff;} .demo:hover{border:1px solid #cecece ...

  7. ie6和ie7下z-index bug的解决办法

    一.匆匆带过的概念 关于CSS中层级z-index的定义啊什么的不是本文的重点,不会花费过多篇幅详细讲述.这里就简单带过,z-index伴随着层的概念产生的.网页 中,层的概念与photoshop或是 ...

  8. IE6和IE7下绝对定位position：absolute和margin的冲突问题解决

    绝对定位的Position:absoulte的元素,会让相邻的兄弟元素的margin-top失效.而如果去掉了兄弟元素的高度又会正常. <div id="layer1" st ...

  9. 关于JSON.parse在ie6，ie7下未定义的issue

    情况是这样的: 在ie6下出现一个js error,说是JSON.parse为定义,一查,才知道,ie6,ie7不支持JSON. solution:只要在使用JSON之前加载个json2.js就行了. ...

随机推荐

  1. 【原创】-- tftp安装配置及使用

    环境:Ubuntu 14.04  OK6410 环境搭建: (1) $ sudo apt-get install tftp tftpd openbsd-inetd 或者安装tftp的增强版本tftp- ...

  2. Keepalived+tomcat的HA配置

    需要节点 NODE1—————-IP:192.168.0.2 NODE2—————-IP:192.168.0.3 VIP—————-IP:192.168.0.10 以下操作在2台机器上都要运行 先编辑 ...

  3. 【原创】“借贷宝”砸钱，邀请码 GZZKZK2 (注册成功每人可得20现金，可直接提现）。。。而这只是开始

    作为IT/互联网资深码农的我,从专业技术角度剖析其流程,确认其各个环节控制严格,无欺诈嫌疑, 最佳运气邀请码 : GZZKZK2, 你在注册时值得拥有, 无邀请码无奖励, 亲一定要记住.对 APP操作 ...

  4. C#设计模式(14)——模板方法模式（Template Method）

    一.引言 提到模板,大家肯定不免想到生活中的“简历模板”.“论文模板”.“Word中模版文件”等,在现实生活中,模板的概念就是——有一个规定的格式,然后每个人都可以根据自己的需求或情况去更新它,例如简 ...

  5. 年终知识分享——UML、设计模式、设计原则

                                                                                                        ...

  6. SQL Server使用文件组备份降低备份文件占用的存储空间

    对于DBA来说,备份和刷新简历是最重要的两项工作,如果发生故障后,发现备份也不可用,那么刷新简历的重要性就显现出来,哇咔咔!当然备份是DBA最重要的事情(没有之一),在有条件的情况下,我们应该在多个服 ...

  7. ComponentOne Xuni助力Xamarin开发者突破百万，快速开发Android、IOS Apps

    在微软Build 2015上,随着VS 2015的预览版发布,Xamrine免费版已经作为VS 2015跨平台移动解决方案的核心.与此同时,Xamarin官方也宣布其用户量达到百万之多.2011年7月 ...

  8. Maven学习总结(五)——聚合与继承

    一.聚合 如果我们想一次构建多个项目模块,那我们就需要对多个项目模块进行聚合 1.1.聚合配置代码 <modules> <module>模块一</module> & ...

  9. android: 播放音频

    在 Android 中播放音频文件一般都是使用 MediaPlayer 类来实现的,它对多种格式的音 频文件提供了非常全面的控制方法,从而使得播放音乐的工作变得十分简单.下表列出了 MediaPlay ...

  10. 销傲销售过程GSP管理系统功能概述

    1      公司介绍 西安海思威软件有限公司于2009年2月注册成立,海思威软件公司隶属于海思威集团,位于交通十分便利的西安经济技术开发区.公司致力于中国本土式销售管理的研究与管理软件产品的开发,是 ...