我使用CSS和表格将分数线放在分子和分母之间。对于一个复杂的分数,它不能在ant浏览器上正常工作。下面是显示问题的try it编辑器中的示例代码使用。字母C下面有一条不需要的边线。但是字母F,同样编码是可以的。我尝试了4个浏览器,都有同样的问题。有一种变通方法是添加style="border:none"解决问题<td的在(添加类不起作用),但为什么我需要这样做?PS:是的,我知道><数学比;但是对我来说太笨重了。>
<!DOCTYPE html>
<html>
<head>
<style>
table {display:inline-table; vertical-align:middle}
table tr:first-child td {border-bottom:solid black}
td {vertical-align:middle>
</style>
</head>
<body>
V = <table>
<tr> <td>A + <table>
<tr> <td>B</td></tr>
<tr> <td>C</td></tr></table></td></tr>
<tr> <td>D + <table>
<tr> <td>E</td></tr>
<tr> <td>F</td></tr></table>
</td></tr></table>
</body>
</html>
您的目标是tr元素中作为第一个子元素的所有td元素。
C在外部表的第一个tr中,因此成为目标,尽管它也在另一个表和tr中。
如果您更具体一点,请确保只选择那些作为第一个子tr的直接子的tds,那么C将失去其下划线。
<!DOCTYPE html>
<html>
<head>
<style>
table {
display: inline-table;
vertical-align: middle
}
table tr:first-child>td {
border-bottom: solid black
}
td {
vertical-align: middle>
</style>
</head>
<body>
V =
<table>
<tr>
<td>A +
<table>
<tr>
<td>B</td>
</tr>
<tr>
<td>C</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>D +
<table>
<tr>
<td>E</td>
</tr>
<tr>
<td>F</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>