不明白为什么此代码在Google协作平台HTML Box小工具中不起作用

Question

我正在搞乱谷歌网站,试图让一些HTML代码实际工作,我正在碰壁.基本上我希望能够输入html代码以及css样式而不必使用内联样式,所以我做了一些研究,确定它可以完成.据说所有人都需要添加一个HTML小工具并输入相关代码,点击保存和shezam!它应该工作.问题是,当我这样做时,它根本不起作用.

我已经查看了以下链接以获得一些指导,看起来我正在做的一切正常:

1. https://productforums.google.com/forum/#!topic/sites/rk6RRHNefso
2. https://support.google.com/sites/answer/2500646?hl=en

另一个奇怪的部分是,当我使用第二个链接示例时,它工作正常,但是当我删除示例的脚本部分时,它无法像我的代码一样生成样式化结果.这是一个我尝试过的非常简单的例子.

全球版

<style>

#tester {
 padding: 100px;
 height: 500px;
 width: 500px;
 border: 1px solid #0F0;
 background-color: #ff0000;
}

</style>


<div id="tester">please work 0_0</div>

内联版本

<div id="tester" style="padding: 100px; height: 500px; width: 500px; border: 1px solid #0F0; background-color: #ff0000;">please work 0_0</div>

我得到的只是div本身没有格式化的句子.如果我改变它以使用内联样式,它工作得很好,但那真的打败了HTML框的目的首先.

关于我做错的任何建议？

编辑:这是一个带有上面测试代码的JSFiddle,它应该是什么样子

的jsfiddle

另外,我应该指出.我提供的代码工作正常,没有错误.我希望解决的问题是让第一个版本(非内联版)在Google协作平台的Html框中工作.

Answer 1

您在"HTML Box"中包含的HTML和CSS将被沙箱化,因此您不能使用它将样式应用于页面其余部分中的元素.

我使用以下代码在我的网站上工作

<style type="text/css">
#tester {
padding: 100px;
height: 500px;
width: 500px;
border: 1px solid #0F0;
background-color: #ff0000;
}
</style>

<div id="tester">please work 0_0</div>

默认情况下,当您处于编辑器模式时,似乎没有应用HTML框中的自定义CSS.如果您转到页面的右上角,请单击" 更多" >" 预览页面"作为查看器,它将正确显示.

HTML BOX视图

预览为查看器