Css problem with IE/FF compatibility

I have some CSS that doesn't behave correctly with IE8. It works fine with FF3, but in IE8 there are white boxes in between the list items and the whole thing is buggy. here is the css in question #golist { width:900px; margin-top:20px; margin-right:auto; margin-left:auto; } #listing { list-style:none; margin:0; padding:0; } #listing li { float:left; display:block; width:128px; background:#fff; border:1px solid #000000; height:96px; } #listing li a { border:none; } #listing p { margin-bottom:0; } /* ---- show-hide elements ---- */ #listing li .show{ display:block; width:128px; height:96px; } #listing li .hide { color:#121212; text-align: left; height: 0; overflow: hidden; background-image:url(bghover.png); } #listing li:hover .hide, #listing li.over .hide { cursor: pointer; height: 96px; width:128px; text-align:center; } #listing li:hover .show, #listing li.over .show { height: 0; overflow: hidden; } #listing li a, #listing li a:visited, #listing li a:active { color:#121212; font-size:12px; text-decoration:none; } #listing li a:hover { color:#121212; text-decoration:none; } And here is the code itself:
The idea is to have a 128x96 box with an image. On mouseover, a layer pops up over it with some text.

以上就是Css problem with IE/FF compatibility的详细内容,更多请关注web前端其它相关文章!

赞(0) 打赏
未经允许不得转载:web前端首页 » CSS3 答疑

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

前端开发相关广告投放 更专业 更精准