Question

我有一张表如下：

<table>
<tr>
<td>
*PROBLEMATIC CELL*
</td>
<td rowspan="2">
</td>
<td rowspan="3">
</td>
</tr>

<tr>
<td>
</td>
</tr>

<tr>
<td colspan="2">
</td>
</tr>
</table>

第一行的第一个单元格底部有一个填充。好吧，它不是真正的填充，但它看起来像填充和使用firebug我找不到实际上的空间。

我认为发生的事情是，firefox会自动调整第一个tr中第一个td的底部填充，其中第一个td的填充顶部和第二个tr的唯一td。

P.S。在Chrome中完美运行。

基本上我想要实现的是第一个tr中第一个td的高度，只有所需的高度但不高，以便该单元格的内容与td结束的位置相同他们之间没有任何空间。

网站网址为：http://mmamail.com/

它似乎与第二TR的第一个TD上的填充顶部有关。奇怪的是它在chrome上很好用。

Answer 1

您为浏览器提供了不完整的布局问题。您有一个三乘三的网格，其列或行都没有固定的大小。所以问题是你最终会得到比你想象的更高的第一行，因为浏览器试图在第一列的单元格中分配第二列中的rowspan引起的“备用”高度。

没有标准化的算法;浏览器做不同的事情，通常包括不愉快的事情，比如查看每个单元格中标记的原始字节数。您不想依赖此行为。它还会降低页面渲染速度，并且当内容非常少或大量时，会产生非常奇怪的页面扭曲效果。如果您需要使用表格进行布局，请确保对固定大小的列使用明确宽度的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 Level 1 HTML属性。 input.type。

Answer 2

用css控制表格单元格填充可能很棘手。尝试添加这两个css规则：

table { border-spacing: 0; }
table td { padding: 0; }

很遗憾，所有浏览器都不支持border-spacing规则，因此您可能需要将cellpadding="0"和cellspacing="0"作为属性添加到表中。

Answer 3

如果您指的是“每月民意调查”和“每月杂志”框之间的空格，则不是由填充引起的......

正在发生的事情是td包含Flash视频太高，并且因为它的rowspan为2，左侧的两个td正在调整到高度最高的td（又称视频框）

一种解决方案是在前两行下面添加另一个tr，
让它有一个空的td，
将视频框的行距更改为3

然后，您在前两个框之间看到的冗余空间将转移到您刚刚创建的空td。

或

我建议你咬紧牙关并开始使用CSS而不是表格进行布局，纯粹是因为：

我们正处于21世纪的第二个十年
使用CSS
将来更改网站外观会更容易，而不会触及标记。
搜索引擎索引您的网站内容会好得多
辅助软件（如屏幕阅读器）可以按照应该看到的顺序查看您的内容
最后你将是一个快乐的开发者

Answer 4

我尝试使用以下HTML代码，这只是代码片段的更完整版本。但是，我没有看到你所描述的填充。所以我最好的猜测是它是由你在别处定义的其他一些CSS规则引起的。

<!doctype html>
<html>
<head>
</head>
<body>
<table>
<tr>
<td>
*PROBLEMATIC CELL*
</td>
<td rowspan="2">
&nbsp;
</td>
<td rowspan="3">
&nbsp;
</td>
</tr>

<tr>
<td>
&nbsp;
</td>
</tr>

<tr>
<td colspan="2">
&nbsp;
</td>
</tr>
</table>
</body>
</html>

HTML CSS Padding-bottom 0在firefox上不起作用

4 个答案: