gpt4 book ai didi

javascript - 我不能在 Android 上使用嵌入式 <style> CSS 吗?

转载 作者:太空宇宙 更新时间:2023-11-04 04:38:02 25 4
gpt4 key购买 nike

我正在 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 上使用嵌入式 &lt;style&gt; CSS 吗?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15968096/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com