css 一个哦布局实例 问题
以下 代码 在ie6 下 和ff的效果不一致，
问题在 #box 的width 224px;
四个a的 width: 4 乘以 56px = 224
ff 下是计算对的，但ie6 是错位的，不知道 为什么。
- HTML code
<!doctype html><html> <head> <meta charset="gb2312" /> <title></title> <style> * { margin:0; padding:0; } ul { list-style:none; } img { border:none; border-radius:4px; } body { background:#000; } #box { margin:20px auto; padding:2px; width:224px; border-radius:5px; background:#fff; overflow:hidden; *zoom:1; } #box div { float:left; width:168px; height:156px; overflow:hidden; } #box a { float:left; width:56px; height:54px; text-align:center; } #box a img { display:block; width:50px; height:50px; border:2px solid #ddd; } #box a:hover { position:relative; } #box a:hover img { border-color:#f59701; } </style> <script> </script> </head> <body> <div id="box"> <div id="div">1</div> <a href="javascript:"><img src="images/small_1.jpg" /></a> <a href="javascript:"><img src="images/small_2.jpg" /></a> <a href="javascript:"><img src="images/small_3.jpg" /></a> <a href="javascript:"><img src="images/small_4.jpg" /></a> <a href="javascript:"><img src="images/small_5.jpg" /></a> <a href="javascript:"><img src="images/small_6.jpg" /></a> <a href="javascript:"><img src="images/small_7.jpg" /></a> <a href="javascript:"><img src="images/small_8.jpg" /></a> <a href="javascript:"><img src="images/small_9.jpg" /></a> <a href="javascript:"><img src="images/small_10.jpg" /></a> <a href="javascript:"><img src="images/small_11.jpg" /></a> </div> </body></html>[解决办法]
如果不改变224px的话，也许只能用js把img给绝对定义在计算出来的地方了。。另外空语句应该是
javascript:;
少了个分号。
[解决办法]
[解决办法]
- HTML code
<a href="javascript:"><img src="images/small_1.jpg" /></a> <a href="javascript:"><img src="images/small_2.jpg" /></a> <a href="javascript:"><img src="images/small_3.jpg" /></a> <a href="javascript:"><img src="images/small_4.jpg" /></a> <a href="javascript:"><img src="images/small_5.jpg" /></a> <a href="javascript:"><img src="images/small_6.jpg" /></a> <a href="javascript:"><img src="images/small_7.jpg" /></a> <a href="javascript:"><img src="images/small_8.jpg" /></a> <a href="javascript:"><img src="images/small_9.jpg" /></a> <a href="javascript:"><img src="images/small_10.jpg" /></a> <a href="javascript:"><img src="images/small_11.jpg" /></a><a style="height:0;width:0;text-indent:-1000px;"></a>
[解决办法]
http://writeblog.csdn.net/
刚刚针对这个问题更新了下个人博客，ootwo 感谢你的这个问题