X
點擊此處開啟此網站的行動版。

技術支援討論區

javascript showing on page

已張貼

I had one our websites showing the javascript on the page. After some searching I found out that the script tag inherits "display:block" and shows it's content. IMO that's a bit weird, but other Browser show the same behavior. My question is not to avoid this as I can easily avoid it but if this should be considered a bug in Firefox?

An example can be found here: http://test.timo-design.nl/firefox/scriptshowing.htm

HTML of this test page:

<!DOCTYPE html>
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
  <META http-equiv="Content-Script-Type" content="type">
  <title>Test Page
  </title>
  <style type="text/css">
  .Main *{display:block; background:#f80;}
  .Main h1{background:#0f0;}
  </style>
 </head>
 <body id="Body">
  <div class="Main">
   <h1>Script test</h1>
   <script>
    //This is an inline script which shows up in the page
    var x = 1
   </script>
  </div>
 </body>
</html>

Thanks, Timo

I had one our websites showing the javascript on the page. After some searching I found out that the script tag inherits "display:block" and shows it's content. IMO that's a bit weird, but other Browser show the same behavior. My question is not to avoid this as I can easily avoid it but if this should be considered a bug in Firefox? An example can be found here: http://test.timo-design.nl/firefox/scriptshowing.htm HTML of this test page: <pre><nowiki> <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8" /> <META http-equiv="Content-Script-Type" content="type"> <title>Test Page </title> <style type="text/css"> .Main *{display:block; background:#f80;} .Main h1{background:#0f0;} </style> </head> <body id="Body"> <div class="Main"> <h1>Script test</h1> <script> //This is an inline script which shows up in the page var x = 1 </script> </div> </body> </html></nowiki></pre> Thanks, Timo

由 cor-el 於 修改

額外的系統細節

已安裝的外掛程式

  • Adobe PDF Plug-In For Firefox and Netscape 10.1.14
  • Citrix Online App Detector Plugin
  • Google Update
  • Office Authorization plug-in for NPAPI browsers
  • The plug-in allows you to open and edit files using Microsoft Office applications
  • Shockwave Flash 17.0 r0
  • 5.1.40416.0
  • Windows Presentation Foundation (WPF) plug-in for Mozilla browsers
  • iTunes Detector Plug-in

應用程式

  • User Agent: Mozilla/5.0 (Windows NT 6.0; rv:38.0) Gecko/20100101 Firefox/38.0

更多資訊

ErickRibeiro 0 個解決方法 10 個答案

Put the SCRIPT tag outside of the DIV tag and it'll work.

Put the SCRIPT tag outside of the DIV tag and it'll work.

由 ErickRibeiro 於 修改

jscher2000
  • Top 10 Contributor
8767 個解決方法 71704 個答案

有幫助的回覆

I would not call this a case of inheritance. Instead, you have expressly stated that every single element under .Main should be display:block by using the universal selector:

.Main *{display:block; background:#f80;}

Perhaps it would be more logical if the universal selector (*) had some exceptions. For example, one seldom if ever would want to style the script and style tags. But I don't think that is envisioned by the current "Standards", such as they are, so Firefox is unlikely to deviate from universal being 100% universal.

https://developer.mozilla.org/docs/Web/CSS/Universal_selectors

I would not call this a case of inheritance. Instead, you have expressly stated that every single element under .Main should be display:block by using the universal selector: .Main *{display:block; background:#f80;} Perhaps it would be more logical if the universal selector (*) had some exceptions. For example, one seldom if ever would want to style the script and style tags. But I don't think that is envisioned by the current "Standards", such as they are, so Firefox is unlikely to deviate from universal being 100% universal. https://developer.mozilla.org/docs/Web/CSS/Universal_selectors

提出問題者

ErickRibeiro said

Put the SCRIPT tag outside of the DIV tag and it'll work.

Thanks, I know how to avoid this, it was more a question of this behavior is correct or not.

''ErickRibeiro [[#answer-739928|said]]'' <blockquote> Put the SCRIPT tag outside of the DIV tag and it'll work. </blockquote> Thanks, I know how to avoid this, it was more a question of this behavior is correct or not.

提出問題者

jscher2000 said

I would not call this a case of inheritance. Instead, you have expressly stated that every single element under .Main should be display:block by using the universal selector: .Main *{display:block; background:#f80;} Perhaps it would be more logical if the universal selector (*) had some exceptions. For example, one seldom if ever would want to style the script and style tags. But I don't think that is envisioned by the current "Standards", such as they are, so Firefox is unlikely to deviate from universal being 100% universal. https://developer.mozilla.org/docs/Web/CSS/Universal_selectors

Agreed.

I now found in: http://www.w3.org/TR/html5/scripting-1.html

"... script ... The element does not represent content for the user."

But in: http://w3c.github.io/html-reference/script.html

I see,

Typical default display properties script { display: none; }

So it's a bit vague IMO :-)

''jscher2000 [[#answer-739937|said]]'' <blockquote> I would not call this a case of inheritance. Instead, you have expressly stated that every single element under .Main should be display:block by using the universal selector: .Main *{display:block; background:#f80;} Perhaps it would be more logical if the universal selector (*) had some exceptions. For example, one seldom if ever would want to style the script and style tags. But I don't think that is envisioned by the current "Standards", such as they are, so Firefox is unlikely to deviate from universal being 100% universal. https://developer.mozilla.org/docs/Web/CSS/Universal_selectors </blockquote> Agreed. I now found in: http://www.w3.org/TR/html5/scripting-1.html "... script ... The element does not represent content for the user." But in: http://w3c.github.io/html-reference/script.html I see, Typical default display properties script { display: none; } So it's a bit vague IMO :-)

有幫助的回覆

Ok, there's much more you can show I wouldn't expect to work :-) I guess I'll have to live with it ;-)

 head, title, meta, link, script{color:#000; display:block; width:100%; min-height:1em;}
 head{background:#FF8; padding:0.3em;}
 title{background:#f00;}
 meta{background:#0f0; margin-bottom:0.3em;}
 link:link{background:#08f; margin-bottom:0.3em;}
 script{background:#00f; margin-bottom:0.3em;}
Ok, there's much more you can show I wouldn't expect to work :-) I guess I'll have to live with it ;-) head, title, meta, link, script{color:#000; display:block; width:100%; min-height:1em;} head{background:#FF8; padding:0.3em;} title{background:#f00;} meta{background:#0f0; margin-bottom:0.3em;} link:link{background:#08f; margin-bottom:0.3em;} script{background:#00f; margin-bottom:0.3em;}