Как заставить <noscript>быть встроенным и наследовать стили CSS? - PullRequest
Новая
       19

Как заставить <noscript>быть встроенным и наследовать стили CSS?

0 голосов
/ 04 марта 2010

Использование <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>

Ответы [ 4 ]

1 голос
/ 23 августа 2012

Старый, но все еще актуальный вопрос - http://www.tigerheron.com/article/2007/10/alternative-noscript-tag представляет собой отличное и очень простое решение:

"Вставьте следующий код в раздел <head> вашей веб-страницы: 

<script type="text/javascript"> document.write('<style>.noscript { display:none }</style>'); </script>

Когда вам нужно использовать <noscript>, используйте <span class="noscript">. "

1 голос
/ 18 мая 2011

Я бы рекомендовал другой подход по сравнению с использованием тегов 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 и функцию из тела, а затем просто используйте следующий JS: 

$(document).ready(function(){
    $("html").removeClass("noJS");
});
0 голосов
/ 04 марта 2010

Вы пытались поместить элемент, например, span, в тег noscript, а затем стилизовать span?Это длинный выстрел, но он может сработать.

В качестве альтернативы, будьте очень точны со своим селектором и сделайте это.Что-то вроде #content p noscript { display:inline !important; } может работать.Но это также может быть неразрешимым.

В крайнем случае, вы могли бы отказаться от тега noscript и поместить его в span (или по вашему выбору) и присвоить ему класс noscript - затем удалить этов твоих js.

0 голосов
/ 04 марта 2010 
<!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;}
 </style>
  </head>
  <body>
    <script type="text/javascript">document.write('<p>This is some text</p>');</script>
    <noscript><p>This is some text that should be displayed on the same line with the same style if JS if disabled.</p></noscript>
  </body>
</html>

Нечто подобное должно делать то, что вы хотите. Вы, конечно, должны вместо этого использовать ненавязчивые методы, но я думаю, что сейчас это выше номинала.

...