开发者

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.

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜