个人中心
文章发布
退出
作者热门文章
- android - 多次调用 OnPrimaryClipChangedListener
- android - 无法更新 RecyclerView 中的 TextView 字段
- android.database.CursorIndexOutOfBoundsException : Index 0 requested, 光标大小为 0
- android - 使用 AppCompat 时，我们是否需要明确指定其 UI 组件(Spinner、EditText)颜色
25
4
我正在 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/
25
4
0
我是 javascript 的新手(今天开始弄乱它)。 我正在尝试更改名为“bar”的元素(div)的高度。条形图将成为图表的一部分。 我可以毫无问题地将按钮连接到更改栏高度的函数。一切正常，除了条形
错误 -> “UIVIew”没有名为“addSubView”的成员 override func viewDidLoad() { super.viewDidLoad() // Do an
我在命令行工具项目中复制并粘贴了 main.swift 下面链接中的代码。 How do you use CGEventTapCreate in Swift? 它构建没有错误，但是当我运行时， gua
我在尝试编译我的代码时遇到以下错误。 ERROR! ..\myCode\CPOI.cpp:68:41: error: cannot dynamic_cast 'screenType' (of type
我正在尝试将多个字符串连接到一个我已为其分配内存的字符串指针。这是一个例子: char *finalNumString = malloc(sizeof(char)*1024); finalNumStr
我在使用 dup2() 和 pipe() 时遇到问题。 当我尝试将管道的写入端 dup2 到 STDOUT_FILENO 时，我收到了 EBADF。 我用 gdb 在 dup2(pout[1], ST
首先，我应该说我运行的是 Windows 7。 因此，今天早上我尝试像往常一样从我的存储库中提取数据，但我做不到。我得到了错误: The authenticity of host 'github.co
刚开始在虚拟环境中运行Python，乱用Django，无法激活虚拟环境。 花了最后 4 个小时尝试在本地终端/VS 代码上激活虚拟环境 (venv)，但没有成功。 避免使用“sudo pip inst
Tidyverse 的粉丝经常给出使用小标题而不是数据框的几个优点。它们中的大多数似乎旨在保护用户免于犯错误。例如，与数据框不同，小标题: 不需要 ,drop=FALSE不从数据中删除维度的论据。 不
我一直在对 Elm 应用程序进行 docker 化时遇到问题。据我所知，我已经创建了一个完整且有效的 Docker 文件……但它不起作用。 我会解释的。 所以我的脚本在 3 个文件中运行。 首先是启动
我可以在 Controller 中使用@Autowired，例如 @RestController public class Index { @Autowired HttpServlet
我定义了一个方法和一个函数: def print(str:String) = println val intToString = (n:Int) => n.toString 现在我想创作它们。 我的问
当我控制台单独记录变量“pokemons”时，它确实返回一个数组。但是当我尝试映射它时，出现错误: TypeError: pokemons.map is not a function 我的代码: im
每当我尝试在 Python 解释器中导入 smtplib 时，都会收到此错误: ImportError: cannot import name fix_eols 我该如何解决这个问题？ 编辑:这是完整
我正在使用 Meteor.js 开发一个项目，但在使用 Handlebar 时遇到了一些问题:我想检索集合的最后一项，并显示字段:其中包含 html 的文本: 这是我的javascript代码: Te
你好，我想使用 Service 实现 GestureDetector 但是我有这个错误The method onTouchEvent(MotionEvent) of type GestureServi
我正在尝试在 Controller bean 中 Autowiring 接口(interface) 在我放置的上下文配置文件中 和 我的 Controller 类是 @Controller pub
我试图在 mainwindow.cpp 中包含 QtSvg，但是当我编译时它说无法打开包含文件:QtSvg。我已经在我的 *.pro 文件中添加了这个(QT += svg)。我可以知道可能是什么问题吗
鉴于以下 PostgreSQL 代码，我认为这段代码不容易受到 SQL 注入(inject)攻击: _filter 'day' _start 1 _end 10 _sort 'article_name
我想执行以下操作。这在 MySQL 中是非法的。 PostGRESQL 中关联的 CTE(“with”子句)有效。这里的假设是 MySQL 中的子查询不是完全限定的 CTE。 请注意:这个查询显然非常
我是一名优秀的程序员,十分优秀！