0

I'm a little surprised of strange behaviour of Firefox empty span has height:

var height,
    width,
    infoText = "",
    $span = $('<span></span>');

$('body').append($span);
$span.text(infoText);
height = $span.height();
width = $span.width();
$('body').append(' height: ' + height);
$('body').append(' width: ' + width);

jsfiddle is here

reproduced only in Firefox (FF version is 27.0)
in Opera, Chrome and IE height = 0

is it FF bug?

Ifozest
  • 900
  • 2
  • 12
  • 22
  • 1
    to understand this, i think you need to read this: http://stackoverflow.com/questions/32875/browsers-default-css-stylesheets – Manuel Richarz Feb 06 '14 at 10:30

2 Answers2

0

Just add following code in span..

var height,
    width,
    infoText = "",
    $span = $('<span style="display:inline-block;"></span>');

now height should be 0px.

angfreak
  • 993
  • 2
  • 11
  • 27
0

By default span's display is inline so add display:inline-block in your span or add this in CSS like,

span{
    display:inline-block;
}

Live Demo

Rohan Kumar
  • 40,431
  • 11
  • 76
  • 106