返回首页当前位置：首页 >> 网站建设 >> 正文

web标准常见问题大集合[3]

文章来自:设计学院 | 发表时间:2007-10-10 22:56:33

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>


这个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://cimg2.163.com/catchpic/E/ED/ED6381B711E97447A0FD3DE823488FB6.gif");

}

li a {

position:relative;

top:-5px;

font:12px/25px 宋体;

}

-->

</style>

<ul>

<li><a href="#">web标准常见问题大全</a></li>

<li><a href="#">web标准常见问题大全</a></li>

<li><a href="#">web标准常见问题大全</a></li>

<li><a href="#">web标准常见问题大全</a></li>

<li><a href="#">web标准常见问题大全</a></li>

</ul>


这个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><a href="#">web标准常见问题大全web标准常见问题大全</a></li>

<li><a href="#">web标准常见问题大全web标准常见问题大全</a></li>

<li><a href="#">web标准常见问题大全web标准常见问题大全</a></li>

<li><a href="#">web标准常见问题大全web标准常见问题大全</a></li>

<li><a href="#">web标准常见问题大全web标准常见问题大全</a></li>

</ul>

此方法适用与IE与OP浏览器
相关文章 更多