關於隱藏元素高度的問題 css visibility:hidden 與 display:none的區別

其實這是一個老問題了，s visibility:hidden 與 display:none 共同點就是都會似的元素不可見。但是 visibility:hidden 的DOM元素是占用空間的，會擠占其他元素的位置，寬度和高度邊框邊距等都不會發生變化，所以使用 offsetWidth等屬性獲取的值不會發生變化。 但是display:none 就完全不同了，在DOM樹中完全不會渲染，就相當於不存在這個DOM一樣，所以使用 offsetWidth 等獲取到的結果都是0。 明白了這些，下面我們來看一個簡單的應用。

在IE8中使用angular和bootstrap3的時候，發現引入 ui.bootstrap之后鼠標划過對應的tr（列表布局使用的table>tr）的時候會出現閃動的情況，查找bootstrap的源碼就可以發現其實它是在 tr的后面添加了div，這樣在IE8中就會導致整個布局錯亂，那這里我們只能自己動手來寫一個類似的功能了，這里就牽扯到計算隱藏元素高度的問題。

首先在body結束標簽之前，我們新增一個 tootip的div，代碼如下（其實就是 bootstrap 中 tooltip插件里面的一個參數 template）：

<div id="tooltips" class="tooltip top">
    <div class="tooltip-arrow"></div>
    <div class="tooltip-inner"></div>
</div>

增加如下代碼后，bootstrap默認的css會直接渲染為tooltip的樣式，這里為了方便，我們就不再更改默認的class，然后我們讓這個提示框顯示到對應元素的上方，中間位置，但是問題來了，tooltip-inner里面的內容是不固定的，也就是說這里面的內容高度是不確定的，因此我們根據元素位置獲取的top值在這里需要經過計算，減去這里的tooltip的高度才能正確加載到文檔的對應位置。所以在鼠標移開的事件中就必須使用visibility:hidden 如果使用display:none, 再次獲取tooltip的高度會發現高度為0了，看代碼吧。

如果使用display:none (jq中的 hide()方法)

$.fn.tips = function(content){
        var    $tt = $('#tooltips'),
            $ttinner = $('.tooltip-inner'),
            pos = $(this).offset(),
            w = parseInt($(this).outerWidth(),10);
        $ttinner.html(content);    
        var calcWidth = parseInt($tt.outerWidth(), 10);
        var h = parseInt($tt.outerHeight(),10),
            l = parseInt(pos.left)*1 + (w - calcWidth)*0.5;
        $tt.css({left:l+'px',top:(pos.top-h)+'px'}).fadeIn(100);
    }
    $.fn.tipshide = function(){
        $('#tooltips').hide();
    }

上面代碼只有第一次會正確顯示提示框，第二次的時候將無法正確顯示，下面是修復后的

$.fn.tips = function(content){
        var    $tt = $('#tooltips'),
            $ttinner = $('.tooltip-inner'),
            pos = $(this).offset(),
            w = parseInt($(this).outerWidth(),10);
        $ttinner.html(content);    
        var calcWidth = parseInt($tt.outerWidth(), 10);
        var h = parseInt($tt.outerHeight(),10),
            l = parseInt(pos.left)*1 + (w - calcWidth)*0.5;
        $tt.css({left:l+'px',top:(pos.top-h)+'px', visibility:"visible"}).fadeIn(100);
    }
    $.fn.tipshide = function(){
        $('#tooltips').css("visibility","hidden");
    }