一个ie6兼容性问题引发的血案。
0
悬赏园豆：20
[待解决问题]
先看这个 这是 一个自适应宽度的两栏结构 无任何兼容性问题 这个没有双倍边距bug的原因我也找到了 是因为设置浮动式设置父级盒子的浮动 正好不符合 浮动 元素 外边距的 条件
<!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=gb2312" /> <title>一行两列，左侧固定右侧自适应布局 - W3Cfuns.com</title> <style type="text/css"> body,div{margin:0; padding:0;} #box{width:100%; height:600px; background:#ccc; float:left;} #right{margin-left:300px; height:600px; background:#56bcf3;} #left{width:300px; height:500px; background:#6bee68; float:left; margin-left:-100%;} </style> </head> <body> <div id="box"> <div id="right">右侧宽度自适应</div> </div> <div id="left">左侧宽度固定</div> </body> </html>
看下面代码。
#contentleft{ background:#999; height:500px; width:600px; float:left;margin-left:-800px;}
这个地方 margin-left如果用-100%ie6就出兼容性问题 改成800px；就好了 我想问问出现这个问题的原因是什么。
<!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>web浮动练习</title> <!-- 先写结构然后结构优化 然后写css样式 --> <style type="text/css"> body,div,#header,#content,#footer,ul,li,#box,#contentright,#contentleft{margin:0px; padding:0px;} /* 重置css标签*/ #header,#content,#footer,ul{width:800px; margin:0 auto; font-weight:bold; font-style:normal;}/* 集体声明 水平居中 字体加粗 字体样式 标准*/ #header{height: 80px;background:#85C8FA;} #content{ background:#0F0; overflow:hidden;} /*解决溢出问题 */ /*去掉高度 内容在文本流之中缩小为0 overflow: hidden;解决问题 父级盒子高度自适应不要用清除浮动*/ #box{background:#ffc; width:100%; height:500px; float:left;} #contentright{ margin-left:600px;background:#CCF; height:500px; width:200px;} /*留出600px的边距*/ #contentleft{ background:#999; height:500px; width:600px; float:left;margin-left:-800px;} /*去掉霸权主义 左边距负100 正好跨越一个页面 到最左边右边的留出一块相对距离正好组成一个页面*/ #footer{height:100px; background:#85C8FA;} ul{background: #60F; height:40px; margin-bottom:1px #333; } ul li { height:40px; line-height:40px; float:left; list-style:none;} /*设置高度 行高 使其垂直居中*/ ul li a{ color:#fff; padding:0 20px;text-decoration:none; float:left; display:block;} /*设置a的内边距撑大 a盒子让连接范围扩大到边距 去掉下划线 设置ie6 不识别块状元素bug*/ ul li a:hover{ background: #FE9827;} /*设置鼠标移动效果 背景颜色*/ </style> </head> <body> <div id="header">web布局练习</div> <div id="nav"> <ul> <li><a href="#">首页</a></li> <li><a href="#">jquery</a></li> <li><a href="#">Javascript</a></li> <li><a href="#">xhtml</a></li> <li><a href="#">css3</a></li> <li><a href="#">html5</a></li> <li><a href="#">关于作者</a></li> </div> <div id="content"> <div id="box"> <div id="contentright"></div> </div> <div id="contentleft"></div> </div> <div id="footer">footer</div> </body> </html>
