您向浏览器提出了不完整的布局问题。您有一个 3×3 的网格,其列或行都没有固定大小。所以问题是你最终得到的第一行比你预期的要高,因为浏览器试图在第一列的单元格中分配由第二列中的行跨度引起的“备用”高度。
对此没有标准化的算法;浏览器会做不同的事情,通常包括不愉快的事情,比如查看每个单元格中标记的原始字节数。你不想依赖这种行为。它还会减慢页面渲染速度,并且当内容非常少或大量时会产生非常奇怪的页面扭曲效果。如果您需要使用表格进行布局,请确保使用table-layout: fixed 为固定大小的列提供显式宽度,并在有行跨度时为单元格设置显式高度,以避免歧义。
但是,rowspan/colspan 的激增通常暗示您应该考虑另一种布局形式。这个例子使用 CSS 更容易实现。例如:
<div id="ads">
<script type="text/javascript">//...google stuff...</script>
...
</div>
<div id="content">
<div id="video"><fieldset>
<legend>...</legend>
<object ...>
</fieldset></div>
<form id="poll" method="post" action="..."><fieldset>
<legend>...</legend>
...options...
</fieldset></form>
<form id="subscribe" method="post" action="..."><fieldset>
<legend>...</legend>
...fields...
</fieldset></form>
<div id="about">
...
</div>
</div>
样式类似:
#ads { position: absolute; right: 0; width: 160px; }
#content { margin-right: 160px; }
#video { float: right; width: 440px; }
#poll, #subscribe { margin: 0 440px 0 0; }
#about { clear: right; }
我还建议您将 JavaScript 逻辑从您当前必须分隔 JavaScript 块(嵌入的 <script> 块或链接的外部脚本)的内联事件处理程序属性中移出。特别是对于多行事件处理程序:除了将脚本混合到标记中的可怕可维护性之外,在 HTML/XML 中属性中的换行符没有被保留。这意味着您的 JS 代码中的换行符将转换为空格,因此如果您错过了一个分号,您的脚本将中断或行为异常(通常在脚本块或外部脚本中,auto-newline-semicolon-fallback 会节省您的时间)。
即。
onsubmit="
var inputs = this.getElementsByTagName('input');
var checkedValue;
for(var i = 0; i < inputs.length; i++)
{
if(inputs[i].getAttribute('type') == 'radio' && inputs[i].checked)
{
checkedValue = inputs[i].value;
}
}
/*makeAjaxPostRequest('/poll/ajax-vote.php', 'vote='+checkedValue, processAjaxResponse);*/
makeAjaxGetRequest('/poll/ajax-vote.php?vote='+checkedValue, processAjaxResponse);
return false;"
改为:
<form id="pollForm" method="post" action="/poll/form-vote.php>
...
</form>
<script type="text/javascript">
document.getElementById('pollForm').onsubmit= function() {
var checkedValue= getRadioValue(this.elements.vote);
makeAjaxPostRequest('/poll/ajax-vote.php', 'vote='+encodeURIComponent(checkedValue), processAjaxResponse);
return false;
};
function getRadioValue(fields) {
for (var i= fields.length; i-->0;)
if (fields[i].checked)
return fields.value;
return '';
};
</script>
始终只允许对具有积极作用的活动表单发出 POST 请求。创建查询字符串时始终使用encodeURIComponent。不要使用getAttribute,因为它在 IE 中无法正常工作;改用直接 DOM 级别 1 HTML 属性,例如。 input.type.