Question

我在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>

这会插入到现有页面中，因此我将这些片段排序为类似iFrames的猜测。

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

修改
适用于： - Android 4.0.1 不起作用： - Android 2.3.1 - IOS 4.1

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

修改：
因此，从我所看到的情况来看，<style>似乎不适用于类和id。如果我使用常规HTML元素作为选择器，它可以工作。

修改：我的开发网站是here。我正在使用一个名为renderJs的插件，它将HTML片段（以及他们的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无效。

Answer 1

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

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

Answer 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正在工作。

我可以不在Android上使用嵌入式<style> CSS吗？</style>

2 个答案: