起初对于Display和visibility区别只是知道在于是否占据物理空间，没有很深刻的理解，直到遇到一个问题，才明白了这占据物理空间的意义。
先看区别：
display:none
CSS1 隐藏对象。与 visibility 属性的hidden值不同，其不为被隐藏的对象保留其物理空间
visibility:hidden
对象隐藏，与 display 属性不同，此属性为隐藏的对象保留其占据的物理空间。
下面引入问题：如果想要获得被指定了display=‘none’元素或者其子元素的大小，由于其不占据物理空间，因此除非指定了特定的大小，否则都不能正常获得。
当然也不是没有办法获得，可以采用如下方法：
通过元素的clientHeight属性能够得到元素的高度,如：
var height = element.clientHeight;
这种做法的局限：
1. 如果元素的display属性设置为none, 那么得到的结果为0
2. 在safari浏览器中，需要使用：element.offsetHeight得到实际高度，这是safari浏览器的bug
下面是Prototype提供的方法，能够兼容各种浏览器，同时在元素隐藏的情况下也能正确得到元素尺寸，供参考：
getDimensions: function(element) {
element = $(element);
var display = $(element).getStyle('display');
if (display != 'none' && display != null) // Safari bug
return {width: element.offsetWidth, height: element.offsetHeight};
// All *Width and *Height properties give 0 on elements with display none,
// so enable the element temporarily
var els = element.style;
var originalVisibility = els.visibility;
var originalPosition = els.position;
var originalDisplay = els.display;
els.visibility = 'hidden';
els.position = 'absolute';
els.display = 'block';
var originalWidth = element.clientWidth;
var originalHeight = element.clientHeight;
els.display = originalDisplay;
els.position = originalPosition;
els.visibility = originalVisibility;
return {width: originalWidth, height: originalHeight};
}
因此可以通过visibility:hidden;position:absolute;来模拟display:none
虽然解决了问题，但是却不完美，如果当前页面嵌在iframe下而此iframe又被包裹在display=‘none’的div中（或者说是当外层有更多的display=‘none’的元素包裹时），就不太好解决了。
如：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
</HEAD>
<BODY>
<div style="display:none;">
<IFRAME class="diviframe" id="iframeID_0" src="Noname4.html" frameBorder=0 width="100%" height="100%"></IFRAME>
</div>
<div style="visibility:hidden;">
<IFRAME class="diviframe" id="iframeID_1" src="Noname4.html" frameBorder=0 width="100%" height="100%"></IFRAME>
</div>
</BODY>
</HTML>
Noname4.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
</HEAD>
<script>
window.attachEvent("onload",function(){
alert(
document.getElementById("selectID").currentStyle['width']
);
alert(
document.getElementById("selectID").style.width
);
alert(
document.getElementById("selectID").offsetWidth
);
alert(
getDimensions(document.getElementById("selectID")).width
);
})
var getDimensions=function(element) {
//var display = element.style.display;
//if (display != 'none' && display != null) // Safari bug
// return {width: element.offsetWidth, height: element.offsetHeight};
// All *Width and *Height properties give 0 on elements with display none,
// so enable the element temporarily
var els = element.style;
var originalVisibility = els.visibility;
var originalPosition = els.position;
var originalDisplay = els.display;
els.visibility = 'hidden';
els.position = 'absolute';
els.display = 'block';
var originalWidth = element.clientWidth;
var originalHeight = element.clientHeight;
els.display = originalDisplay;
els.position = originalPosition;
els.visibility = originalVisibility;
return {width: originalWidth, height: originalHeight};
}
</script>
<BODY>
<select name="selectName" id="selectID" style="visibility:hidden">
<option value="测试数据A">测试数据A</option>
<option value="测试数据BB">测试数据BB</option>
<option value="测试数据CCC">测试数据CCC</option>
<option value="其它">其它</option>
</select>asdfsadf
</BODY>
</HTML>
不知道大家有什么好的办法？
