Question

css幽灵按钮 请问这段代码为什么在ie8中，鼠标放在框内非文字处时没有hover效果，但在其他浏览器则正常？

a
{
display:block;
position:absolute;
right:0;
padding: 15px;
border: 2px solid #FFFFFF;
color:#FFFFFF;
text-align:center;
font-size: 16px;
font-weight:bold;
max-width: 100%;
width:200px;
}
a:hover, a:active
{
border: 2px solid #E04D47;
color:#E04D47;
}

Answer 1

经测试IE8下正常，但IE7下出现了你描述的问题，可能你的IE8开启了IE7的浏览器渲染模式。该问题是IE6/7的一个bug，即透明元素不响应hover事件，你例子中的a标签没有任何背景颜色，所以IE6/7下鼠标悬停a标签内除边框、文字以外的区域将无法触发hover事件，解决的办法也很简单：为其设置一个空的背景图片，代码如下：

a {
	display: block;
	position:absolute;
	right:0;
        padding: 15px;
	border: 2px solid #FFFFFF;
	color:#FFFFFF;
	text-align:center;
	font-size: 16px;
	font-weight:bold;
	max-width: 100%;
	width:200px;
	background-image:url(about:blank);
}