Chrome: display: inline weirdness...
I'm stuck on a very strange problem, and I can't figure out what exactly is happening... Unfortunately, I cannot link to the page in question, as it is under internal development, but the problem is as follows:
I have page with 3 links - A, B and C. Each of these links to dynamically generated files, and it can easily take several seconds for t开发者_如何学编程hese files to be created. We therefore put the functionality for generating these files on separate pages. A, B and C request the relevant page; When the page has generated the desired file, it responds with the filename which the user then downloads. So far, so good - all of this works.
To visually indicate activity, we show / hide a small gif when these operations are started / stopped. (A, B and C each has it's own icon). They are enabled via:
.getElementById().style.display = 'inline';
and disabled via:
.getElementById().style.display = 'none';
This works perfect for B and C --- but not for A!
I know it finds the image to enable correctly (via alerts() and what will become clear in a second), and I know the style is set as well (for the same reasons), but the gif just doesn't show up. Furthermore, this happens ONLY in Chrome - both Firefox and IE shows the icon just fine. And, more than this - if I use
.getElementById().style.display = 'block';
rather than
.getElementById().style.display = 'inline';
Chrome shows the image as well! I don't want to use block as it moves the gif to a line of it's own which is ugly, but at least it demonstrates I have the correct image and so forth.
And, furthermore, if I don't change the display via JS but instead just create the gif with display: inline (rather than the current display: none) it shows up just fine in Chrome. All of this makes me think JS + Chrome is somehow the problem --- but I'm not sure. :/
Oh, and a little extra weirdness - if I click A, nothing happens. If I then click B, THEN A's gif shows up!
All in all I have no idea what is happening, but I hope someone here can enlighten me!
Thanks in advance!
EDIT: I've put the sample code on http://jsbin.com/uzosu3/edit
If you don't want to use block because it pushes the image down a line.
Try using
.getElementById().style.display = 'inline-block';
Might want to check it in the IE browsers though.
精彩评论