智言个人博客今天在学习DHTML的时候发现了一个问题，就是有关overflow属性的一个兼容型问题，这个问题也算是我首次在浏览器兼容问题上遇到的，当然是自己非常高兴的，但是毕竟是第一次遇到这样的问题，所以在寻找解决这个问题的方式上做出了很多尝试，而且是很艰难的，但是最终还是解决了，所以希望跟大家分享一下。
首先我先将overflow这个属性做一个简单的讲解。
overflow属性介绍
对于overflow这个属性，它的值有四种：visible、hidden、scroll、auto
hidden：默认值，隐藏溢出容器的内容且不出现滚动条。
visible：对溢出内容不做处理，内容可能会超出容器。
scroll：隐藏溢出容器的内容，溢出的内容将以卷动滚动条的方式呈现。
auto：当内容没有溢出容器时不出现滚动条，当内容溢出容器时出现滚动条，按需出现滚动条。此为body对象和textarea的默认值。
那么我接下来做了一个测试，代码如下：
<!doctype html>
<html>
<head>
<title>智言个人博客</title>
<meta name="generator" content="editplus">
<meta name="author" content="">
<meta name="keywords" content="">
<meta name="description" content="">
//定义CSS样式
<style type="text/css">
dl dd{margin:0;}
dl{height:16px;}
.open{overflow:hidden;}
.close{overflow:visible;}
</style>
</head>
<body>
function list(i){
var oDlNode = i.parentNode;
if(oDlNode.className=="open"){
oDlNode.className="close";
}else{
oDlNode.className="open";
}
}
</script>
<dl class="open">
<dt onclick="list(this)">显示条目一</dt>
<dd>展开列表内容1</dd>
<dd>展开列表内容1</dd>
<dd>展开列表内容1</dd>
<dd>展开列表内容1</dd>
</dl>
<dl class="open">
<dt onclick="list(this)">显示条目二</dt>
<dd>展开列表内容2</dd>
<dd>展开列表内容2</dd>
<dd>展开列表内容2</dd>
<dd>展开列表内容2</dd>
</dl>
<dl class="open">
<dt onclick="list(this)">显示条目三</dt>
<dd>展开列表内容3</dd>
<dd>展开列表内容3</dd>
<dd>展开列表内容3</dd>
<dd>展开列表内容3</dd>
</dl>
</body>
</html>
显示的结果却是下图所示：
然后我用鼠标左键点击其中的一个条目显示的结果变成了另人糟糕的下图：
而我需要实现的效果是这样的，如下图：
然后我就在百度上搜索了一下，但是找了很久都没有解决，最后只能靠自己了。
最后我又重新的实验和分析了十多遍啊….最终在我一点的改动和实验后分析，原来问题出现在overflow属性上，因为之前如果在IE6上去这样实现效果是没有问题的，只是对于目前的浏览器来说已经不能实现了，因为在定义了高度的情况下，就算overflow的属性值为visible同样不会显示出来，所以要像实现visible的功能，这个时候就需要把height属性去掉才能实现。
如下图的CSS样式改为：
<style type="text/css">
dl dd{margin:0;}
.open{overflow:hidden;height:16px;}
.close{overflow:visible;}
</style>
这个时候问题解决了。
总结
虽然整个过程浪费了我很多时间，但是我相信这个结果还是令我很满意的，毕竟很多东西需要我们自己认认真真的去思考才能有好的经验累积出来，不是所有人都能一下子就成为工程师的。
相关页面演示：http://www.asni.cn/wp-content/uploads/2014/08/listDemo.html
评论前必须登录！
注册