我正在 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>
这是插入到现有页面中的，所以我猜这些 fragment 有点像 iFrame。
问题:
问题是，虽然 Javascript 工作正常，但我使用 <style> 指定的所有 CSS标签被忽略。知道为什么吗？
编辑:
适用于:
- 安卓 4.0.1
不适用于:
- 安卓 2.3.1
- iOS 4.1
如果我将 CSS 添加到页面加载时请求的 main.css 文件，一切正常。如果它在我的小工具中，则它无法正常工作。
编辑:
所以据我所知，<style>似乎不适用于类和 id。如果我使用常规 HTML 元素作为选择器，它就可以工作。
编辑: 我的开发站点是 here .我正在使用一个名为 renderJs 的插件，它将 HTML fragment (连同它们的 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 不起作用。
最佳答案
查看演示页面生成的 HTML 代码(即由 JavaScript 修改的代码)表明 style 元素是在 body 中生成的。虽然在存在 scoped 属性时 HTML5 草案允许此类元素，但对该属性的支持似乎不存在，样式表是全局应用的。但是，某些浏览器可能根本不应用它，至少在动态生成 style 元素时是这样。
更好的方法是使所有样式表成为文档的全局样式表，最好是作为外部样式表，并使用上下文选择器将规则限制为仅适用于某些元素。并且可能使用 JavaScript 来更改元素的类，而不是直接操作样式表。
关于javascript - 我不能在 Android 上使用嵌入式 <style> CSS 吗？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/15968096/