首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > CSS >

关于浮动和position:absolute定位兼容有关问题

2012-03-26 
关于浮动和position:absolute定位兼容问题各位大虾们,我写了一导航,但因技术有限,没有写得很好,好不容易在

关于浮动和position:absolute定位兼容问题
各位大虾们,我写了一导航,但因技术有限,没有写得很好,好不容易在IE8下调试下调试正常,然后在FF和Chrome下测试也正常,但是一到IE6就出问题了,求帮助啊!实在是不知道怎么做了,所以求各位帮修改一下。(因为是环境要求必须写成行样式所以代码里面用了大量的行样式,基本上没有用到内嵌样式,所以请见谅了。

HTML code
<!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><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>????????</title><style type="text/css">img { border:none;}body{ margin:0; padding:0;}#nav{ width:801px; height:31px; margin:0 auto; float:left}#nav ul{ list-style-type:none; margin:0; padding:0;}#nav ul li{ float:left; height:32px; line-height:32px; padding:0px; 10px; }#nav ul li a{ display:block; width:89px; height:31px; line-height:31px; text-align:center; background:url(http://hi.csdn.net/attachment/201202/18/9345795_1329579948l7Aq.jpg) 0 0 no-repeat; font-size:14px; color:#FFF;}#nav ul li a:hover{ background:url(http://hi.csdn.net/attachment/201202/18/9345795_13295799481Npq.jpg) 0 0 no-repeat;}a { color: #000; text-decoration: none; }a:hover { color: #F00; }/*--------------------*/.navman{ width:950px; height:150px;}#navleft{ width:149px;; height:150px; float:left;}#navright{ width:801px; height:150px; float:right;}input{ background-color:#4f4f4f;}</style></head><body><div class="navman" ><div id="navleft"><img src="http://hi.csdn.net/attachment/201202/18/9345795_1329579948WrsA.jpg" alt="logo" /></div><!--???--><div id="navright"><!--??????--><div style=" width:801px; height:94px; float:left;"><img src="http://hi.csdn.net/attachment/201202/18/9345795_1329579948zJKP.jpg" alt="????" border="0" /></div><!--?м???--><div id="nav"><ul><li><a href="#">首页</a></li><li><a href="#">男&nbsp;&nbsp;裤</a></li><li><a href="#">女&nbsp;&nbsp;裤</a></li><li><a href="#">中老年裤</a></li><li><a href="#">儿童裤</a></li><li><a href="#">配饰皮带</a></li><li><a href="#">牛仔专区</a></li><li><a href="#">休闲专区</a></li><li><a href="#">商务专区</a></li></ul></div><!--?±?????--><div style="width:801px; height:25px; background-color:#212121; float:left;"><div style=" width:237px; height:25px; float:left; background:url(http://hi.csdn.net/attachment/201202/18/9345795_1329579948jd22.jpg) no-repeat;"><div style=" width:237px; height:25px;"><form action="#" class="focus" method="get" name="SearchForm">    <input name="userId" type="hidden" />    <input name="shopId" type="hidden" value="69580797" />    <input name="view_type" type="hidden" />    <input name="order_type" type="hidden" />    <input name="search" type="hidden" value="y" />    <label for="J_ShopSKey"></label>    <input name="keyword" class="text J_SEKeyword" style="border:0; width: 150px; height:14px; font-size:12px; color:#FFF; position:absolute; left: 206px; top: 130px;" maxlength="25" />    <button class="button" style="border-bottom: 0px; border-left: 0px; width: 25px; background: url(http://hi.csdn.net/attachment/201202/18/9345795_1329579948jsku.jpg) no-repeat; height: 25px; border-top: 0px; cursor: pointer; float:right; border-right: 0px" type="submit"></button>  </form></div></div></div></div></div></body></html> 



[解决办法]
什么问题?
[解决办法]
把body{ margin:0; padding:0;}
改成body,*{ margin:0; padding:0;}

把所有元素的内外边距都重置为0,在IE6下就正常了

热点排行