同一元素的不同高度值

时间:2016-04-15 14:18:08

标签: javascript jquery css

<div class="container" style="width: 200px; border: 1px solid;">
    <span style="height: auto;">
        lorem ipsum sit dolor amet lorem ipsum sit dolor amet lorem ipsum sit dolor amet lorem ipsum sit dolor amet lorem ipsum sit dolor amet lorem ipsum sit dolor amet lorem ipsum sit dolor amet lorem ipsum sit dolor amet lorem ipsum sit dolor amet lorem ipsum sit dolor amet lorem ipsum sit dolor amet lorem ipsum sit dolor amet
    </span>
    <a>... more</a>
</div>

<script>
    $(function(){

        console.log( $('.container span').height() );   // = 205

        $('.container a').on('click', function(){
            $('.container span').css('height', 'auto');
            console.log( $('.container span').height() );  // = 168
        });
    });
</script>

我不明白为什么在jquery使用css()设置高度auto后,我为同一个元素获得2个不同的高度值。

修改

我发现了问题,它来自google fonts .. font-family:'Source Sans Pro',Arial,sans-serif;

https://jsfiddle.net/h97zdf6q/2/

<link href='https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,300italic,300,400italic,600,600italic' rel='stylesheet' type='text/css'>
<div class="container" style="width: 200px; border: 1px solid; font-family: 'Source Sans Pro', Arial, sans-serif; ">
    <span style="height: auto;">
        lorem ipsum sit dolor amet lorem ipsum sit dolor amet lorem ipsum sit dolor amet lorem ipsum sit dolor amet lorem ipsum sit dolor amet lorem ipsum sit dolor amet lorem ipsum sit dolor amet lorem ipsum sit dolor amet lorem ipsum sit dolor amet lorem ipsum sit dolor amet lorem ipsum sit dolor amet lorem ipsum sit dolor amet
    </span>
    <a>... more</a>
</div>

0 个答案:

没有答案