在ArcGIS Online（浏览器地图）中，我一直将HTML和CSS代码粘贴到几个不同的绘图点。目标是在单击该点时在对话框/小窗口中弹出样式表。首先，该表看起来和功能正常;保存图层，删除它，然后重新加载它，你看到的只是原始CSS代码和没有样式的表。
在查看ArcGIS支持的HTML帮助页面后，我注意到在线浏览器版本不支持＆＃34;样式＆＃34;标记（外部，内部和内联），它从代码中过滤掉。这是导致我的表在重新加载后显示原始代码的原因。
他们列出的选项是＆＃34; div＆＃34;和＆＃34; span，＆＃34;但我似乎无法使这些工作正常。有没有办法按照我打算的方式进行这项工作？
ArcGIS Online Supported HTML Page
以下实际完整代码：
<style type="text/css"> (this style tag doesn't work and is automatically filtered out)
.datagrid table {
border-collapse: collapse;
text-align: left;
width: 1280px;
}
.datagrid {
font: normal 12px/150% Arial, Helvetica, sans-serif;
background: #fff;
overflow: hidden;
border: 1px solid #006699;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}
.datagrid table td,
.datagrid table th {
padding: 12px 10px;
}
.datagrid table thead th {
background: -webkit-gradient( linear, left top, left bottom, color-stop(0.05, #006699), color-stop(1, #4D1A75));
background: -moz-linear-gradient( center top, #006699 5%, #4D1A75 100%);
filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#006699', endColorstr='#4D1A75');
background-color: #006699;
color: #ffffff;
font-size: 17px;
font-weight: bold;
border-left: 1px solid #0070A8;
}
.datagrid table thead th:first-child {
border: none;
}
.datagrid table thead th:nth-child(1) {
border: none;
background: -webkit-gradient( linear, left top, left bottom, color-stop(0.05, #9643D6), color-stop(1, #4D1A75));
background: -moz-linear-gradient( center top, #9643D6 5%, #4D1A75 100%);
background-color: #9643D6;
}
.datagrid table thead th:nth-child(2) {
border: none;
background: -webkit-gradient( linear, left top, left bottom, color-stop(0.05, #D05649), color-stop(1, #7A281F));
background: -moz-linear-gradient( center top, #D05649 5%, #7A281F 100%);
background-color: #D05649;
}
.datagrid table thead th:nth-child(3) {
border: none;
background: -webkit-gradient( linear, left top, left bottom, color-stop(0.05, #159D82), color-stop(1, #094338));
background: -moz-linear-gradient( center top, #159D82 5%, #094338 100%);
background-color: #159D82;
}
.datagrid table tbody td {
color: #00496B;
border-left: 1px solid #4D1A75;
font-size: 12px;
border-bottom: 1px solid #4D1A75;
font-weight: normal;
}
.datagrid table tbody .alt td {
color: #00496B;
}
.datagrid table tbody td:first-child {
border-left: none;
}
.datagrid table tbody td:nth-child(1) {
background: #F4E3FF;
}
.datagrid table tbody .alt td:nth-child(1) {
background: #FFFFFF;
}
.datagrid table tbody td:nth-child(2) {
background: #F9D9D6;
}
.datagrid table tbody .alt td:nth-child(2) {
background: #FFFFFF;
}
.datagrid table tbody td:nth-child(3) {
background: #A5F3E3;
}
.datagrid table tbody .alt td:nth-child(3) {
background: #FFFFFF;
}
.datagrid table tbody tr:last-child td {
border-bottom: none;
}
.datagrid table tfoot td div {
border-top: 1px solid #652299;
background: -webkit-gradient( linear, left top, left bottom, color-stop(0.05, #939393), color-stop(1, #FFFFFF));
background: -moz-linear-gradient( center top, #737373 5%, #FFFFFF 10%);
background-color: #737373;
}
.datagrid table tfoot td {
padding: 0;
font-size: 12px
}
.datagrid table tfoot td div {
padding: 2px;
}
.datagrid table tfoot td ul {
margin: 0;
padding: 0;
list-style: none;
text-align: right;
}
.datagrid table tfoot li {
display: inline;
}
.datagrid table tfoot li a {
text-decoration: none;
display: inline-block;
padding: 4px 8px;
margin: 1px;
color: #FFFFFF;
border: 1px solid #652299;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
background: -webkit-gradient( linear, left top, left bottom, color-stop(0.05, #652299), color-stop(1, #4D1A75));
background: -moz-linear-gradient( center top, #006699 5%, #4D1A75 100%);
filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#652299', endColorstr='#4D1A75');
background-color: #652299;
}
.datagrid table tfoot ul.active,
.datagrid table tfoot ul a:hover {
text-decoration: none;
border-color: #652299;
color: #FFFFFF;
background: none;
background-color: #0682B8;
</style> (this style tag doesn't work and is automatically filtered out)
<div class="datagrid">
<table style="text-align:center">
<thead>
<tr>
<th style="text-align:center">header</th>
<th style="text-align:center">header</th>
<th style="text-align:center">header</th>
</tr>
</thead>
<tfoot>
<tr>
<td colspan="3">
<div id="paging">
<ul>
<li><a href="address will eventually be inserted here"><span>Temporary Blank</span></a>
</li>
<li><a href="address will eventually be inserted here"><span>Temporary Blank</span></a>
</li>
<li><a href="address will eventually be inserted here"><span>Temporary Blank</span></a>
</li>
</ul>
</div>
</tr>
</tfoot>
<tbody>
<tr>
<td>data</td>
<td>data</td>
<td>data</td>
</tr>
<tr class="alt">
<td>data</td>
<td>data</td>
<td>data</td>
</tr>
<tr>
<td>data</td>
<td>data</td>
<td>data</td>
</tr>
<tr class="alt">
<td>data</td>
<td>data</td>
<td>data</td>
</tr>
<tr>
<td>data</td>
<td>data</td>
<td>data</td>
</tr>
<tr class="alt">
<td>data</td>
<td>data</td>
<td>data</td>
</tr>
<tr>
<td>data</td>
<td>data</td>
<td>data</td>
</tr>
<tr class="alt">
<td>data</td>
<td>data</td>
<td>data</td>
</tr>
</tbody>
</table>
</div>
答案 0 :(得分：0)
<style type="text/css">
.datagrid table {
border-collapse: collapse;
text-align: left;
width: 1280px;
}
.datagrid {
font: normal 12px/150% Arial, Helvetica, sans-serif;
background: #fff;
overflow: hidden;
border: 1px solid #006699;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}
.datagrid table td,
.datagrid table th {
padding: 12px 10px;
}
.datagrid table thead th {
background: -webkit-gradient( linear, left top, left bottom, color-stop(0.05, #006699), color-stop(1, #4D1A75));
background: -moz-linear-gradient( center top, #006699 5%, #4D1A75 100%);
filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#006699', endColorstr='#4D1A75');
background-color: #006699;
color: #ffffff;
font-size: 17px;
font-weight: bold;
border-left: 1px solid #0070A8;
}
.datagrid table thead th:first-child {
border: none;
}
.datagrid table thead th:nth-child(1) {
border: none;
background: -webkit-gradient( linear, left top, left bottom, color-stop(0.05, #9643D6), color-stop(1, #4D1A75));
background: -moz-linear-gradient( center top, #9643D6 5%, #4D1A75 100%);
background-color: #9643D6;
}
.datagrid table thead th:nth-child(2) {
border: none;
background: -webkit-gradient( linear, left top, left bottom, color-stop(0.05, #D05649), color-stop(1, #7A281F));
background: -moz-linear-gradient( center top, #D05649 5%, #7A281F 100%);
background-color: #D05649;
}
.datagrid table thead th:nth-child(3) {
border: none;
background: -webkit-gradient( linear, left top, left bottom, color-stop(0.05, #159D82), color-stop(1, #094338));
background: -moz-linear-gradient( center top, #159D82 5%, #094338 100%);
background-color: #159D82;
}
.datagrid table tbody td {
color: #00496B;
border-left: 1px solid #4D1A75;
font-size: 12px;
border-bottom: 1px solid #4D1A75;
font-weight: normal;
}
.datagrid table tbody .alt td {
color: #00496B;
}
.datagrid table tbody td:first-child {
border-left: none;
}
.datagrid table tbody td:nth-child(1) {
background: #F4E3FF;
}
.datagrid table tbody .alt td:nth-child(1) {
background: #FFFFFF;
}
.datagrid table tbody td:nth-child(2) {
background: #F9D9D6;
}
.datagrid table tbody .alt td:nth-child(2) {
background: #FFFFFF;
}
.datagrid table tbody td:nth-child(3) {
background: #A5F3E3;
}
.datagrid table tbody .alt td:nth-child(3) {
background: #FFFFFF;
}
.datagrid table tbody tr:last-child td {
border-bottom: none;
}
.datagrid table tfoot td div {
border-top: 1px solid #652299;
background: -webkit-gradient( linear, left top, left bottom, color-stop(0.05, #939393), color-stop(1, #FFFFFF));
background: -moz-linear-gradient( center top, #737373 5%, #FFFFFF 10%);
background-color: #737373;
}
.datagrid table tfoot td {
padding: 0;
font-size: 12px
}
.datagrid table tfoot td div {
padding: 2px;
}
.datagrid table tfoot td ul {
margin: 0;
padding: 0;
list-style: none;
text-align: right;
}
.datagrid table tfoot li {
display: inline;
}
.datagrid table tfoot li a {
text-decoration: none;
display: inline-block;
padding: 4px 8px;
margin: 1px;
color: #FFFFFF;
border: 1px solid #652299;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
background: -webkit-gradient( linear, left top, left bottom, color-stop(0.05, #652299), color-stop(1, #4D1A75));
background: -moz-linear-gradient( center top, #006699 5%, #4D1A75 100%);
filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#652299', endColorstr='#4D1A75');
background-color: #652299;
}
.datagrid table tfoot ul.active,
.datagrid table tfoot ul a:hover {
text-decoration: none;
border-color: #652299;
color: #FFFFFF;
background: none;
background-color: #0682B8;
</style> (this style tag doesn't work and is automatically filtered out)
<div class="datagrid">
<table style="text-align:center">
<thead>
<tr>
<th style="text-align:center">header</th>
<th style="text-align:center">header</th>
<th style="text-align:center">header</th>
</tr>
</thead>
<tfoot>
<tr>
<td colspan="3">
<div id="paging">
<ul>
<li><a href="address will eventually be inserted here"><span>Temporary Blank</span></a>
</li>
<li><a href="address will eventually be inserted here"><span>Temporary Blank</span></a>
</li>
<li><a href="address will eventually be inserted here"><span>Temporary Blank</span></a>
</li>
</ul>
</div>
</tr>
</tfoot>
<tbody>
<tr>
<td>data</td>
<td>data</td>
<td>data</td>
</tr>
<tr class="alt">
<td>data</td>
<td>data</td>
<td>data</td>
</tr>
<tr>
<td>data</td>
<td>data</td>
<td>data</td>
</tr>
<tr class="alt">
<td>data</td>
<td>data</td>
<td>data</td>
</tr>
<tr>
<td>data</td>
<td>data</td>
<td>data</td>
</tr>
<tr class="alt">
<td>data</td>
<td>data</td>
<td>data</td>
</tr>
<tr>
<td>data</td>
<td>data</td>
<td>data</td>
</tr>
<tr class="alt">
<td>data</td>
<td>data</td>
<td>data</td>
</tr>
</tbody>
</table>
</div>