Firefox 处理 <td> 的样式与基于 chromium 的浏览器不同

Posted

技术标签:

【中文标题】Firefox 处理 <td> 的样式与基于 chromium 的浏览器不同【英文标题】:Firefox handles styles for <td> different than chromium-based browsers 【发布时间】:2021-12-19 07:34:45 【问题描述】:

.AA,
.AB,
.BC 
  border: 1px solid #000000;
  height: 150px;
  width: 150px;


.AC,
.BA,
.BB 
  border: 1px solid #000000;
  height: 75px;
  width: 75px;


.tableC 
  margin-left: auto;
  margin-right: auto;
<div id="table_pictures">
  <h3> Lorem Ipsum dolor </h3>
  <table class="tableC">
    <tr>
      <td class="AA" rowspan="2"> Über zwei Zeilen
      </td>
      <td class="AB" rowspan="2"> Über zwei Zeilen
      </td>
      <td class="AC"> nur eine Zeile
      </td>
    </tr>
    <tr>
    </tr>
    <tr>
      <td class="BA"> nur eine Zeile
      </td>
      <td class="BB"> nur eine Zeile
      </td>
      <td class="BC" rowspan="2"> Über zwei Zeilen
      </td>
    </tr>
    <tr>
    </tr>
  </table>
</div>

火狐

基于 Chrome

我尝试在不更改 html 文件中的任何内容的情况下设置我的 site.html 的样式。该表应该看起来像来自基于 chrome 的浏览器的图片。在 Firefox 中,表格完全不同。但为什么?我需要改变什么?

我尝试使用以下问题的答案,但 table-layout:fixed; 没有修复它。

Firefox displaying table-cell incorrectly (chrome working good)

【问题讨论】:

这种结构一开始就没有意义。如果您在某些单元格上使用 rowspan - 那么您应该在其他列中有匹配数量的单元格。 @CBroe 但是如何在不接触 html 的情况下做到这一点?还是不能使用firefox? 你为什么不能强化那个 HTML?它的方式非常荒谬,所以我会说它想要被触摸。 @CBroe 在技术上确信我可以做到。但我只想通过使用 CSS 来修复它 这应该有帮助 Setting a table's td height not working in Firefox 我已经在 FF 中尝试过它并且它有效 【参考方案1】:

您也可以将tr 高度设置为 75px

.AA,
.AB,
.BC 
  border: 1px solid #000000;
  width: 150px;


.AC,
.BA,
.BB 
  border: 1px solid #000000;
  width: 75px;


.tableC 
  margin-left: auto;
  margin-right: auto;


tr 
  height: 75px;
<div id="table_pictures">
<h3> Lorem Ipsum dolor </h3>
<table class="tableC">
    <tr>
        <td class="AA" rowspan="2"> two rows
        </td>
        <td class="AB" rowspan="2"> two rows
        </td>
        <td class="AC"> only one row
        </td>
    </tr>
    <tr>
    </tr>
    <tr>
        <td class="BA"> only one row
        </td>
        <td class="BB"> only one row
        </td>
        <td class="BC" rowspan="2"> two rows
        </td>
    </tr>
    <tr>
    </tr>
</table>
</div>

在 Chrome 和 FF(以及 Safari)中测试

【讨论】:

以上是关于Firefox 处理 <td> 的样式与基于 chromium 的浏览器不同的主要内容,如果未能解决你的问题,请参考以下文章

使用 css 为表格中的最后一个 td 设置样式

XSL 选择样式文本和 td

在一个<td>里面的几个<a>都要给他加一个相同的样式,css怎么写

CSS 的表格 td 样式

表格细边框的CSS样式怎么设置?

HTML中有多个table怎么在css中定义TD不同的样式?