我不能在 Android 上使用嵌入式 <style> CSS 吗？答案

【问题标题】：Can I not use embedded <style> CSS on Android?我不能在 Android 上使用嵌入式 <style> CSS 吗？
【发布时间】：2013-04-04 18:54:57
【问题描述】：

我正在 Android HTC Sense 上调试一个网站。该网站使用了大量的插入内容，这些内容伴随着它自己的 CSS 和 JS，例如：

// wrapper id = snippet_id
<html>
<head>
<style type="text/css">
   #snippet_id div {border: 1px solid red !important;}
   div {border: 1px solid blue !important;}
</style>
</head>
<body>
   <div>Hello World</div>
</body>
<html>

这是插入到现有页面中的，所以它对这些 sn-ps 进行排序，我猜这有点像 iFrame。

问题：
问题是，虽然 Javascript 工作正常，但我使用 <style> 标签指定的所有 CSS 都被忽略了。知道为什么吗？

编辑：
适用于： - 安卓 4.0.1 不适用于： - 安卓2.3.1 - IOS 4.1

如果我将 CSS 添加到页面加载时请求的 main.css 文件中，一切正常。如果它在我的小工具中，它就无法工作。

编辑：
所以据我所见，<style> 似乎不适用于类和 id。如果我使用常规 HTML 元素作为选择器，它就可以工作。

编辑：我的开发站点是here。我正在使用一个名为 renderJs 的插件，它将 HTML sn-ps（连同它们的 CSS 和 JS）封装到可重复使用的小工具中。小工具内容将附加到页面正文中，因此虽然小工具可以充当独立的 HTML 页面，但它也可以是页面的一部分。

我的页面中的示例代码（我删除了所有小工具，但下面有一个）：

index.html - 包括 index_wrapper 小工具

<!DOCTYPE html> 
<html itemscope itemtype="http://schema.org/Organization" lang="en"  class="render"> 
<head>
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <link rel="stylesheet" href="../css/overrides.css">
    <script data-main="../js/main.js" type="text/javascript" src="../js/libs/require/require.js"></script>
    <title></title>
</head>
<body class="splash">
  <div data-role="page" id="index">
      <div id="index_wrapper" data-gadget="../gadgets/index_wrapper.html"></div>
  </div>
</body>
</html>

该页面有一个名为 index_wrapper link 的小工具 - 代码如下：

<!DOCTYPE html> 
<head></head>
<body>
   <div id="index_social" data-gadget="../gadgets/social.html"></div>
   <p class="mini t" data-i18n="gen.disclaimer"></p>
</body>
</html>

其中还有一个名为 social here 的小工具。这个小工具包含一些 CSS，但在相关设备上，它会被忽略（刚刚看到，我在 index_wrapper 中缺少</div>，因此尝试看看这是否也解决了问题）。

下面的代码包括我的修复：

<!DOCTYPE html> 
<head>
    <style type="text/css" scoped>
    // will be ignroed
    .el {width: 1px;}
    .menu_social {text-align: center; margin: 1em 0;}
    .action_menu {display: inline-block;}
    .follow_us {display: inline-block; margin: 0; padding: 0 .5em 0 0;}
    ...
  </head>
  <body>
  <div class="menu_social">
    <div>
      <span class="el ui-hidden-accessible"></span><!-- fallback for CSS not working -->
      <div data-role="controlgroup" data-type="horizontal" data-theme="c" class="action_menu">
          <a href="https://twitter.com/nexedi" data-ajax="false" id="follow_twitter" data-role="button" data-icon="tw" data-theme="c" class="t ui-icon-vendor twitter scale-a" data-i18n-target=".ui-btn-text" data-i18n="[title]soc.tw_fw;[html]soc.tw"></a>
        <a href="http://www.facebook.com/pages/Nexedi/168462169880320" data-ajax="false" id="follow_facebook" data-role="button" data-icon="fb" data-theme="c" class="t ui-icon-vendor facebook scale-a" data-i18n-target=".ui-btn-text" data-i18n="[title]soc.fb_fw;[html]soc.fb"></a>
    </div>
  </div>
</div>

<script type="text/javascript">
  //<![CDATA[
  (function () {
     $(document).ready(function() {
      var gadget = RenderJs.getSelfGadget();

      // fallback for old devices which cannot load <style> css
      if (gadget.dom.find(".el").css('width') !== "1px") {
        require(['text!../css/social.css'], function (t) {
          var x = '<style>'+t+'</style>';
          gadget.dom.append(x);
        });
      }

      // trigger enhancement
      $(this).trigger("render_enhance", {gadget: gadget.dom});
    });
  })();
  //]]>
  </script>

  </body>
</html>

所以除了可能错过了结束 </div> 之外，我仍然想知道为什么我的嵌入式 CSS 不起作用。

【问题讨论】：

没有关闭....
“不适用于：- Android 2.3.1 - IOS 4.1”- 哪些浏览器？...当时的浏览器很可能太垃圾了？
是的，您能具体说明您用于测试的浏览器吗？在安卓上
@d'alar'cop：内置浏览器。让我看看有没有版本可以找到
顺便说一句，这不是内联的。它是嵌入式 css

标签： javascript android jquery css web-applications

【解决方案1】：

查看演示页面生成的 HTML 代码（即，由 JavaScript 修改的代码）表明 style 元素是在 body 内部生成的。尽管当存在scoped 属性时，HTML5 草案允许此类元素，但似乎不存在对该属性的支持，并且样式表是全局应用的。然而，有些浏览器可能根本不应用它，至少在动态生成 style 元素时是这样。

更好的方法是使所有样式表对文档都是全局的，最好是作为外部样式表，并使用上下文选择器将规则限制在某些元素上。并且可能使用 JavaScript 来更改元素的类别，而不是直接操作样式表。

【讨论】：

真的。我花了一段时间才知道scoped。想法仍然是封装与小工具相关的所有内容，因此这将包括它的 CSS 和 JS。我还在玩它，所以我可能会尝试使用外部文件与每个小工具嵌入，但我已经在查看大量的 HTTP 请求 :-) 无论如何。感谢您的回答。

【解决方案2】：

好的。丑陋的解决方法：

在内联部分中，设置如下：

<style>
.el {width: 1px;}
</style>

在页面中，像这样设置隐藏元素el：

// ui-hidden-accessible is a JQM class, moving the item out of view
// since it uses pos:absolute, &nbsp; is needed to not break
// selects on the page (compare to JQM ui-icon)
<span class="el ui-hidden-accessible">&nbsp;</span>

然后在运行内联 Javascript（有效）时检查宽度，并在宽度不在 1px 时要求内联 CSS 作为单独的文件

// fallback for old devices which cannot load <style> css
// gadget is my iframe-look-a-like
if (gadget.dom.find(".el").css('width') !== "1px") {
    require(['text!../css/translate.css'], function (t) {
        var x = '<style>'+t+'</style>';
        gadget.dom.append(x);
    });
}

丑陋的和额外的 HTTP 请求，但至少 CSS 可以正常工作。

【讨论】：