前段时间在写样式的时候发现了这个问题,虽然当时就解决了这个 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{;}

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. 通过MongoDB的samus驱动实现基本数据操作

    一.MongoDB的驱动 MongoDB支持多种语言的驱动: 在此我们只介绍 C# 的驱动.仅C#驱动都有很多种,每种驱动的形式大致相同,但是细节各有千秋,因此代码不能通用.比较常用的是官方驱动和sa ...

  2. ZeroMQ(java)之负载均衡

    我们在实际的应用中最常遇到的场景如下: A向B发送请求,B向A返回结果.... 但是这种场景就会很容易变成这个样子: 很多A向B发送请求,所以B要不断的处理这些请求,所以就会很容易想到对B进行扩展,由 ...

  3. ucenter 显示通信成功的条件

    应用的主 URL+/api/uc.php?code= 如果这个页面返回1,则通信成功,也就是说,uc.php是通信成功里重要的一环 事实上,我还没有通信成功,我只是写了一个1在欺骗服务端

  4. sftp的安装和使用

    http://blog.srmklive.com/2013/04/24/how-to-setup-sftp-server-ftp-over-ssh-in-ubuntu/ In my previous ...

  5. sql查找字符串是否包含字符

    SELECT [Fgoodsid] ,[Fgoodsname] ,[Fcinema] ,[Fprice] FROM [tenpaytest].[dbo].[goodsinfo]where Fgoods ...

  6. 20150303--从SQL中获取数据的三级联动

    省市地区的三级联动,每变更一次所选地都需要提交,但是又不需要把整个页面提交,所以我们需要使用控件:UdataPanel.工具--AJAX扩展 还有ScriptManager,并要将其放在页面的最顶端. ...

  7. 线索二叉树Threaded binary tree

    摘要   按照某种遍历方式对二叉树进行遍历,可以把二叉树中所有结点排序为一个线性序列.在该序列中,除第一个结点外每个结点有且仅有一个直接前驱结点:除最后一个结点外每一个结点有且仅有一个直接后继结点.这 ...

  8. stl 生产全排列 next_permutation

    #include<stdio.h>#include<algorithm>using namespace std;int main(){ int n,p[10]; scanf(& ...

  9. leetcode — subsets

    import java.util.ArrayList; import java.util.Arrays; import java.util.List; /** * Source : https://o ...

  10. 【读书笔记】iOS-iOS流媒体

    在网络上直接看电影已经不是什么新鲜的事情,在iOS等移动设备上也有很多在线视频应用,如国内的PPS和PPLive应用,还有一些新闻视频都可以在线观看,如USA TODY.所以这些在线视频都采用流媒体技 ...