html - 如何强制 <noscript> 内联并继承 CSS 样式?

标签 html css stylesheet inline noscript

使用 <noscript>另一个标签的内部似乎会导致它采用自己的样式(即无),并强制内部文本采用自己的行(即使 display:inline 是使用 CSS 设置的)。有什么方法可以避免这种情况,或者可以使用变通方法吗?

这就是我的意思:http://www.webdevout.net/test?01I

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
  <head>
    <title>Test</title>
 <style type="text/css">
  p { font-family:sans-serif; font-size:12px;}
  noscript {display:inline !important;}
 </style>
  </head>
  <body>
    <p>This is some text<noscript> that should be displayed on the same line with the same style if JS if disabled.</noscript></p>
  </body>
</html>

最佳答案

我会推荐使用 script/noscript 标签的不同方法。

像这样效果最好:

<!DOCTYPE html>
<html class="noJS">
    <head>
    <title>noJS Demo</title>

    <style type="text/css">
        html.noJS .jsRequired,
        html .noJS{
            display: none !important;
        }

            html.noJS span.noJS{
                display: inline !important;
            }

            html.noJS div.noJS{
                display: block !important;
            }
    </style>

    <script type="text/javascript">
        function onDocumentLoad(){
            var html = document.getElementsByTagName("html")[0];
            html.className = html.className.replace("noJS", "");
        }
    </script>
    </head>
    <body onLoad="onDocumentLoad();">
        <p>This is some text<span class='noJS'> that should be displayed on the same line with the same style if JS if disabled.</span></p>
    </body>
</html>

当然,如果你用jQuery之类的框架,JavaScript就更简单了,把JS函数和body中的函数去掉,然后用下面的JS就可以了:

$(document).ready(function(){
    $("html").removeClass("noJS");
});

关于html - 如何强制 <noscript> 内联并继承 CSS 样式?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/2377175/

相关文章:

javascript - 外部样式表与 JavaScript 添加的样式标签

Qt QPushButton 样式表悬停

html - 如何使颜色输入在浏览器之间显示一致的最小宽度?

css - 为什么我的 DIV 在 Internet Explorer 中的高度不同?

javascript - 如何清理这段 JavaScript 代码?

css - 使用 css 设计 ul - 为什么 float 会那样工作

html - 使用 CSS 定位 Flash 内容

html - css 影响我站点中的所有表格,如何避免这种情况?

HTML + CSS 布局,底部框显示所有内容,可变高度顶部框滚动

javascript - 将类添加到不同页面上的元素