`
caiceclb
  • 浏览: 239284 次
  • 性别: Icon_minigender_1
  • 来自: 郑州
社区版块
存档分类
最新评论

纯css边框实现菜单下拉三角箭头动态效果，又见IE奇现象

IECSSXHTMLHTML浏览器 
阅读更多

先拿淘宝看这样的例子：

 

正常状态：

 

 

下拉后状态：

 

 

淘宝这个三角是用s标签实现的。我一同事试图使用a，a:hover来模拟还原这个效果，同时我也写了个代码如下

 

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <title> new document </title>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  <meta name="author" content="tofishes@163.com" />
  <meta name="keywords" content="" />
  <meta name="description" content="" />
  <style type="text/css">
	a span { display:inline-block; border:0 solid #fff; border-width:5px 5px 0; border-color:#090 #fff ;width:0; overflow:hidden;height:0; }
	a:hover span { border-width:0 5px 6px;  }
  </style>
 </head>

 <body>  
	<p>
		<a href="">右侧有个小三角,鼠标悬浮会改变<span></span></a>
	</p>
 </body>
</html>
 

 

 原理很简单，利用0高0宽的元素再配以不同宽度不同色彩的边框实现一个三角形。

 

 这段代码在FF等标准浏览器下是没有问题的，但是在IE6下会发现鼠标悬浮过去没有效果，当鼠标左键按下去时才出现意料中的效果。当时同事问我，我也没试出怎么回事。今天写html时候，心血来潮就又试了一下。结果被偶发现一个解决之道：

 

只要在定义a:hover span 样式之前加上一个a:hover { border:0;/*或none*/ } ;

 

神奇的效果出现了，IE6正常了（在未知的时候原谅偶用神奇来描述）。

 

这两者一下子真是想不出来有啥子关系。。。奇怪的IE，先截止到目前为止吧。

 

 

扩展：除了border，貌似background也有此问题。

 

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <title> new document </title>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  <meta name="author" content="tofishes@163.com" />
  <meta name="keywords" content="" />
  <meta name="description" content="" />
  <style type="text/css">
	a span { display:inline-block; height:30px; background:#ccc;}
	a:hover span { background:#f60; }
  </style>
 </head>

 <body>  
	<p>
		<a href=""><span>看看背景会不会变化</span></a>
	</p>
 </body>
</html>

 

是的，背景也没有变化，甚至鼠标点下也没有变化。同样解决之道就是定义：

 

a:hover { background: transparent; }/*为了减少影响使用集成父背景 */

 

还有没有其他属性呢？值的发掘。

  • 大小: 935 Bytes
  • 大小: 1.8 KB
分享到：
| 发现IE6、IE7下列表li中内联块级元素的错 ...
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics