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 的浏览器不同的主要内容,如果未能解决你的问题,请参考以下文章