【问题标题】:HTML CSS Padding-bottom 0 does not work on firefoxHTML CSS Padding-bottom 0 在 Firefox 上不起作用
【发布时间】:2016-10-23 06:30:17
【问题描述】:

我有一张如下表:

<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>

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

我认为正在发生的事情是,firefox 会自动调整第一个 tr 中第一个 td 的底部填充,并使用第二个 tr 的第一个和唯一 td 的填充顶部。

附言在 Chrome 中运行良好。

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

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

这似乎与放置在 SECOND TR 的第一个 TD 上的 padding-top 有关。奇怪的是它在 chrome 上运行良好。

【问题讨论】:

  • 请提供指向示例网站的链接,或发布有问题的 HTML 源代码(包括任何相关的 CSS)。
  • HTML 表格在没有内容的情况下很少出现问题。您的示例没有内容,因此您没有完整地描述问题。

标签: html css firefox html-table


【解决方案1】:

您向浏览器提出了不完整的布局问题。您有一个 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 块(嵌入的 &lt;script&gt; 块或链接的外部脚本)的内联事件处理程序属性中移出。特别是对于多行事件处理程序:除了将脚本混合到标记中的可怕可维护性之外,在 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.

【讨论】:

    【解决方案2】:

    如果您指的是“每月投票”和“每月杂志”框之间的空格,则不是由填充引起的......

    发生的情况是包含 Flash 视频的 td 太高,因为它的 rowspan 为 2,所以左侧的两个 tds 正在调整为最高 td 的高度(又名视频盒)

    一种解决方案是在前 2 行下方添加另一个 tr
    让它有一个空的td,
    将视频框的行跨度更改为 3

    然后您在前 2 个框之间看到的多余空间将转移到您刚刚创建的空 td

    我建议你硬着头皮开始使用 CSS 而不是表格进行布局,纯粹是因为:

    1. 我们正处于 21 世纪的第二个十年
    2. 使用 CSS 更加灵活
    3. 将来更改网站的外观会容易得多,而无需触及标记。
    4. 搜索引擎将您的网站内容编入索引会更好
    5. 辅助软件(例如屏幕阅读器)可以按照您应该看到的顺序查看您的内容
    6. 你最终会成为一名快乐的开发者

    【讨论】:

      【解决方案3】:

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

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

      很遗憾,并非所有浏览器都支持border-spacing 规则,因此您可能必须将cellpadding="0"cellspacing="0" 作为属性添加到表中。

      【讨论】:

      • 在本世纪,您应该不需要为值 0 包含 cellpadding/cellspacing。 border-spacing 不工作的 IE6-7 问题可以通过 border-collapse: collapse 样式解决。
      【解决方案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>
      

      【讨论】:

      • 问题与padding无关。相反,字段集的高度没有达到表格单元格的最大值。
      猜你喜欢
      • 1970-01-01
      • 2015-05-12
      • 2015-02-13
      • 1970-01-01
      • 1970-01-01
      • 2014-06-30
      • 2014-02-16
      • 2017-01-27
      • 1970-01-01
      相关资源
      最近更新 更多