【css】a:hover 设置上下边框在 ie6 和 ie7 下失效

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

PS:

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

时间: 2024-10-09 05:38:20

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

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

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

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

前几天做的项目中碰到这样一个问题,在 ie6 和 ie7 下,给父元素设置 overflow:hidden 不起作用无法隐藏,后来发现是子元素中有设置 position:relative,如果子元素删除 position:relative,那么父元素的 overflow:hidden 可以隐藏,具体代码及效果如下: html 代码: <!doctype html> <html lang="en"> <head> <meta charset=&q

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

一.匆匆带过的概念 关于CSS中层级z-index的定义啊什么的不是本文的重点,不会花费过多篇幅详细讲述.这里就简单带过,z-index伴随着层的概念产生的.网页 中,层的概念与photoshop或是flash中层的概念是一致的.熟悉photoshop或是flash的应该知道,层级越高(图层越靠上),越在上 面显示,如果层发生重叠,层级高的会覆盖层级低的,如果非透明或半透明,则会遮挡. 在photoshop中,层的高低就是靠手动调的,鼠标拖拽,或是ctrl+]或是ctrl+shift+[快捷键改

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

情况是这样的: 在ie6下出现一个js error,说是JSON.parse为定义,一查,才知道,ie6,ie7不支持JSON. solution:只要在使用JSON之前加载个json2.js就行了. 参考:http://stackoverflow.com/questions/2503175/json-on-ie6-ie7 json2.js 下载: https://github.com/douglascrockford/JSON-js

querySelector和querySelectorAll在IE6和IE7下的兼容性问题

if (!document.querySelectorAll) {    document.querySelectorAll = function (selectors) {        var style = document.createElement('style'), elements = [], element;        document.documentElement.firstChild.appendChild(style);        document._qsa =

通过CSS给图像设置圆角边框

<html> <style> .smaller-image{ border-radius: 50%; width: 100px; } </style> <body> <img class="smaller-image" src="/images/cat.jpg"> </body> </html> 效果:

css属性overflow:hidden在IE6、7下失效解决方案

当父元素的直接子元素或者下级子元素的样式拥有position:relative属性时,父元素的overflow:hidden属性就会失效.我们在IE 6 7内发现子元素会超出父元素设定的高度,即使父元素设置了overflow:hidden. 解决这个bug很简单,在父元素中使用position:relative;即可解决该bug. 父元素设置relative属性,子元素设置absolute属性即可避免!

解决IE6,ie7下元素左浮动自动换行的问题

html结构如下: xhtml代码 <ul> <li><a href="category.php?id=7">考研英语</a></li> <li><a href="category.php?id=8">考研数学</a></li> <li><a href="category.php?id=9">考研政治</a&g

jquery 设置radio状态checked ,IE6、7 不兼容问题

设置radio为选中状态: $("#ownId").attr("checked",true); 但此方法在IE6.IE7下不起作用.在网上搜索了很多解决方案,无果. 现找到一个简易的方法解决该问题.原来IE6.IE7下控制选中状态的属性为“defaultChecked”. 修改代码如下: $("#ownId").attr("checked",true); document.getElementById("ownId&