首页 新闻 赞助 找找看

一个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>

 

Crack's_Blog的主页 Crack's_Blog | 初学一级 | 园豆:182
提问于:2014-06-10 00:26
< >
分享
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册