overflow及IE6兼容性问题

dos500 2016-06-06 12:55:57
IE6效果图

其它浏览器效果图

代码
<!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撑大了?哪里出问题了,新手求指教啊
...全文
118 1 打赏 收藏 转发到动态 举报
AI 作业
写回复
用AI写文章
1 条回复
切换为时间正序
请发表友善的回复…
发表回复
jmyz_0455 2016-06-07
  • 打赏
  • 举报
回复
1、因为你的 11111 把 li 撑破了
2、因为你没有指定 li 的尺寸

我建议要固定大小就要设置块元素的长宽值,要不指定的话 IE6 容易出问题。
如果你实在是又要流布局不固定大小又要兼容 IE ,我建议还是弄两个样式表好。
1. HTML对象获取问题 3 2. const问题 3 3. event.x与event.y问题 3 4. window.location.href问题 3 5. frame问题 3 6. 模态和非模态窗口问题 3 7. firefox与IE的父元素(parentElement)的区别 3 8. document.formName.item(”itemName”) 问题 3 9. 集合类对象问题 3 10. 自定义属性问题 3 11. input.type属性问题 3 12. event.srcElement问题 3 13. body载入问题 3 14. 事件委托方法 3 15. Table操作问题 3 16. 对象宽高赋值问题 3 Ø CSS 3 1. cursor:hand VS cursor:pointer 3 2. innerText在IE中能正常工作,但在FireFox中却不行. 3 3. CSS透明 3 4. css中的width和padding 3 5. FF和IE BOX模型解释不一致导致相差2px 3 6. IE5 和IE6的BOX解释不一致 3 7. ul和ol列表缩进问题 3 8. 元素水平居中问题 3 9. Div的垂直居中问题 3 10. margin加倍的问题 3 11. IE与宽度和高度的问题 3 12. 页面的最小宽度 3 13. DIV浮动IE文本产生3象素的bug 3 14. IE捉迷藏的问题 3 15. float的div闭合;清除浮动;自适应高度 3 16. 高度不适应 3 17. IE6下图片下有空隙产生 3 18. 对齐文本与文本输入框 3 19. LI中内容超过长度后以省略号显示 3 20. 为什么web标准中IE无法设置滚动条颜色了 3 21. 为什么无法定义1px左右高度的容器 3 22. 链接(a标签)的边框与背景 3 23. 超链接访问过后hover样式就不出现的问题 3 24. FORM标签 3 25. 属性选择器(这个不能算是兼容,是隐藏css的一个bug) 3 26. 为什么FF下文本无法撑开容器的高度 3

61,129

社区成员

发帖
与我相关
我的任务
社区描述
层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。
社区管理员
  • HTML(CSS)社区
加入社区
  • 近7日
  • 近30日
  • 至今
社区公告
暂无公告

试试用AI创作助手写篇文章吧