61,114
社区成员
发帖
与我相关
我的任务
分享overflow及IE6兼容性问题
IE6效果图
其它浏览器效果图
代码
为什么#jobs ul li中的overflow把内容”1111111“整没了？为什么IE6下，li中的内容把div撑大了？哪里出问题了，新手求指教啊
其它浏览器效果图
代码
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html;charset=utf-8"/>
<title></title>
<style type="text/css">
*{margin:0px;padding:0px;}
#jobs{width:200px;background:#ccc;margin:50px;border:1px #96c2f1 solid;}
#jobs h2{height:30px;background:#00ff00;line-height:30px;text-indent:20px;font-size:14px;margin:1px;}
#jobs h2 a{font-weight:normal;color:#333;font-size:12px;margin-right:10px;float:right;text-decoration:none;}
#jobs h2 a:hover{color:#f00;text-decoration:underline;}
#jobs ul{padding:10px;}
#jobs ul li{list-style:none;text-indent:20px; font-size:12px;line-height:30px;height:30px;background:url(pic/dot.gif) no-repeat 10px 12px;overflow: hidden;border-bottom:1px #069 dashed;}
#jobs ul li span{float:right;margin-right:10px;color:#666;}
#jobs ul li a{color:#00f;text-decoration:none;}
#jobs ul li a:hover{color:#f00;text-decoration:underline;}
</style>
</head>
<body>
<div id="jobs">
<h2><a href="#">0000</a>789</h2>
<ul>
<li><span>IT</span><a href="#">1111111111111111111111111111111111111</a></li>
<li><span>IT</span><a href="#">2</a></li>
<li><span>IT</span><a href="#">3</a></li>
<li><span>IT</span><a href="#">4</a></li>
<li><span>IT</span><a href="#">5</a></li>
<li><span>IT</span><a href="#">6</a></li>
</ul>
</div>
</body>
</html>为什么#jobs ul li中的overflow把内容”1111111“整没了？为什么IE6下，li中的内容把div撑大了？哪里出问题了，新手求指教啊
...全文
请发表友善的回复…
发表回复
jmyz_0455 2016-06-07
- 打赏
- 举报
1、因为你的 11111 把 li 撑破了
2、因为你没有指定 li 的尺寸
我建议要固定大小就要设置块元素的长宽值，要不指定的话 IE6 容易出问题。
如果你实在是又要流布局不固定大小又要兼容 IE ，我建议还是弄两个样式表好。
2、因为你没有指定 li 的尺寸
我建议要固定大小就要设置块元素的长宽值，要不指定的话 IE6 容易出问题。
如果你实在是又要流布局不固定大小又要兼容 IE ，我建议还是弄两个样式表好。
