css 一个哦布局实例 有关问题
日期：2014-05-17 浏览次数：21028 次
css 一个哦布局实例 问题
以下 代码 在ie6 下 和ff的效果不一致，
问题在 #box 的width 224px;
四个a的 width: 4 乘以 56px = 224
ff 下是计算对的，但ie6 是错位的，不知道 为什么。
------解决方案--------------------
如果不改变224px的话，也许只能用js把img给绝对定义在计算出来的地方了。。另外空语句应该是
javascript:;
少了个分号。
------解决方案--------------------
------解决方案--------------------
以下 代码 在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" /&
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
