<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设置高度auto与css（）之后我为同一个元素获得2个不同的高度值 .

EDIT

我发现了问题，这是来自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>
javascript jquery css