web标准常见问题集合2


答案：7. IE6下这两个层中间怎么有间隙
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<style type="text/css"> 
<!--  
.left { 
    float:left; 
    width:100px; 
    height:100px; 
    background:red 
    } 
.right { 
    width:100px; 
    height:100px; 
    background:orange 
    } 
--> 
</style> 
<div class="left">aaaaaa</div> 
<div class="right">aaaaaa</div>

  [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

这个IE的3PX BUG也是经常出现的，解决的办法是给.right也同样浮动 float:left 或者相对IE6定义.left margin-right:-3px; 
8. list-style-image无法准确定位的问题 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<style type="text/css"> 
<!--  
li { 
    list-style:url("http://bbs.blueidea.com/attachments/2006/11/10/arrowb_kJrcZheJmiIF.gif"); 
    } 
li a { 
    position:relative; 
    top:-5px; 
    font:12px/25px 宋体; 
    } 
--> 
</style> 
<ul> 
<li>web标准常见问题大全</li> 
<li>web标准常见问题大全</li> 
<li>web标准常见问题大全</li> 
<li>web标准常见问题大全</li> 
<li>web标准常见问题大全</li> 
</ul>

  [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

这个list-style-image的定位问题也是经常有人问的，解决的办法一般是用li的背景模拟，这里采用相对定位的方法也可以解决 
9. LI中内容超过长度后以省略号显示的方法
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<style type="text/css"> 
<!--  
li { 
    width:200px; 
    white-space:nowrap; 
    text-overflow:ellipsis;  
    -o-text-overflow:ellipsis;  
    overflow: hidden; 
    } 

--> 
</style> 
<ul> 
<li>web标准常见问题大全web标准常见问题大全</li> 
<li>web标准常见问题大全web标准常见问题大全</li> 
<li>web标准常见问题大全web标准常见问题大全</li> 
<li>web标准常见问题大全web标准常见问题大全</li> 
<li>web标准常见问题大全web标准常见问题大全</li> 
</ul>

  [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

此方法适用与IE与OP浏览器
上一个：又一个典型css实例
下一个：2006.12.06更新 TopStyle剪辑库
更多图片编程知识: