Empty tag elements and :visible?

Question

I'm using the latest jquery version.(1.9.1)

I have an empty span element :

<!DOCTYPE html>
 <html>

    <head>
        <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
        <meta charset=utf-8 />
        <title>JS Bin</title>
    </head>

    <body> <span class="c"></span>

    </body>
    <script type='text/javascript'>
        alert($(".c:visible").length);
    </script>

</html>

Chrome ( latest ver ) alerts 0
FF (latest ver) alerts 1
Ie (8) alert 0

Why doesn't it alert1 at chrome ? the element is not hidden.

I can work around this by using filter and spit out all the !display:none but wanted to know if i'm doing anything wrong

http://jsbin.com/urihov/2/edit

@SubodhGhulaxe mmm..not to my testing....http://i.stack.imgur.com/fvl3j.jpg (18.02) — Royi Namir, Mar 19 '13 at 07:10
From jQuery documentation: `Elements are considered visible if they consume space in the document. Visible elements have a width or height that is greater than zero.` — inser, Mar 19 '13 at 07:15
FF: in jsbin it alerts `0` and in jsfiddle it alerts `1`, http://jsfiddle.net/hvf9R/ — Ram, Mar 19 '13 at 07:15
Check this post http://stackoverflow.com/questions/8337186/jquery-isvisible-not-working-in-chrome — K D, Mar 19 '13 at 07:15
@undefined HA..HA... so it is now also depend on the app....great :-) — Royi Namir, Mar 19 '13 at 07:16
Check this one from different browsers: http://jsfiddle.net/hvf9R/1/ It seems FF adds additional height (19px) — inser, Mar 19 '13 at 07:22
See also: http://bugs.jquery.com/ticket/13132 Seems like it will be fixed in version 1.12/2.2! — Glen Little, Sep 05 '14 at 21:37

score 1 · Accepted Answer · answered Mar 19 '13 at 07:23

1

@inser is right a span is an inline element and only gains layout when it has content thus gaining the width and height of its content - in this case the width and height are 0 so not visible to the, if you add this css rule

.c {
  display: block;
}

you will see that the alert says 1 now since you have forced it to be a block element now thus inheriting the width of its parent and gaining layout.

hope it helps,

Cheers

answered Mar 19 '13 at 07:23

Ady Ngom

1,284
2
10
12

Correct, but you need 0 width as well. So use `width: 0;` or `float: left;` – inser Mar 19 '13 at 07:28
actually if you add a width rule just to give it layout it is redundant since as block element via css it inherits the width of its parent which implies width: 100%; – Ady Ngom Mar 19 '13 at 07:32

Empty tag elements and :visible?

1 Answers1