不明白爲什麼此代碼在Google協作平臺中無法正常工作HTML框中的小工具

Question

我正在搞亂Google網站，試圖獲得一些html代碼來實際工作，並且我正在跑進一堵牆。基本上我希望能夠輸入html代碼以及css樣式，而不必使用內聯樣式，所以我做了一些研究並確信它可以完成。假設所有人都需要添加一個HTML小工具並輸入相關的代碼，點擊save和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 &您在「HTML Box」中包含的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 View

Preview as Viewer