views:

32

answers:

2

I have simplified a problem I faced in Firefox (the original code is generated by server side controls). Open the following snippet in IE and in Firefox:

<html>
<style>
    .AllInline, .AllInline * { display: inline; }
</style>
<span class="AllInline">
    Test
    <script type="text/javascript">
        <!-- var obj = {}; //-->
    </script>
</span>
</html>

In IE, I get:
Test
While in Firefox, I get:
Test <!-- var obj = {}; //-->

The content of the script block becomes visible somehow.

I was not expecting the styling rules to be applied to script blocks (can't really see a reason why one would want this either).

Would anyone have an explanation ?

A: 

Don't put JavaScript there. Insert it just before </body></html>.

Test your HTMl in the Echochamber.

mcandre
This is only a short reproducing sample. I would not put the js here either if I was writing it. This comes from a cross fire between styling and what a DevExpress control rendered.
Locksfree
A: 

fascinating bug!

you can add .AllInline script {display: none;} to your css to hide it.

Yisroel
Removing the second selector .AllInline * also works. Just still don't understand why anyone would want this...
Locksfree