Question

我有一个带有一些输入框的简单矩阵，我使用MathML创建。它在Firefox中运行良好，但不适用于Chrome，我只想使用HTML（表格）和CSS重新创建相同类型的东西，以便它可以与更多浏览器一起使用。

这是指向预期效果屏幕截图的链接，因为我无法发布图片：https://i.imgur.com/P2ICwSb.png

使用MathML代码段

＆＃13;

input {
  width: 24px;
  background-color: transparent;
  border: 1px solid gray;
  font-family: serif;
  font-weight: bold;
  text-align: center;
  font-size: 16px;
}
input + input {
  margin-right: 2em;
}
input:first-child {
  margin-left: 1em !important;
}

＆＃13;

<math xmlns="http://www.w3.org/1998/Math/MathML" display="block">
  <semantics>
    <mrow>
      <mo>(</mo>
      <mtable columnalign="center center center" rowspacing="1ex" displaystyle="false">
        <mtr>
          <mtd>
            <mi>
              <input type="text">
            </mi>
          </mtd>
          <mtd>
            <mi>
              <input type="text">
            </mi>
          </mtd>
          <mtd>
            <mi>
              <input type="text">
            </mi>
          </mtd>
        </mtr>
        <mtr>
          <mtd>
            <mi>
              <input type="text">
            </mi>
          </mtd>
          <mtd>
            <mi>
              <input type="text">
            </mi>
          </mtd>
          <mtd>
            <mi>
              <input type="text">
            </mi>
          </mtd>
        </mtr>
        <mtr>
          <mtd>
            <mi>
              <input type="text">
            </mi>
          </mtd>
          <mtd>
            <mi>
              <input type="text">
            </mi>
          </mtd>
          <mtd>
            <mi>
              <input type="text">
            </mi>
          </mtd>
        </mtr>
      </mtable>
      <mo>)</mo>
    </mrow>
  </semantics>
</math>

＆＃13;

我最初的想法是使用border-radius属性并在表格上设置左右边框。下面有一个工作片段，但我不知道与原始MathML代码相比，括号的顶部和底部是如何形成的。当使用border-radius方法时，线条在矩阵的顶部和底部明显变细，并且似乎淡出了＆＃39;。

使用＆lt; table＆gt;的首次尝试代码段和border-radius：

＆＃13;

input {
  width: 24px;
  background-color: transparent;
  border: 1px solid gray;
  font-family: serif;
  font-weight: bold;
  text-align: center;
  font-size: 16px;
}
input {
  margin-right: 1em;
}
td:first-child input {
  margin-left: 1em !important;
}
td:last-child input {
  margin-right: 1em !important;
}
table {
  border-left: 2px solid #000;
  border-right: 2px solid #000;
  border-top-left-radius: 1em;
  border-top-right-radius: 1em;
  border-bottom-left-radius: 1em;
  border-bottom-right-radius: 1em;
}

＆＃13;

<table>
  <tbody>
    <tr>
      <td>
        <input type="text">
      </td>
      <td>
        <input type="text">
      </td>
      <td>
        <input type="text">
      </td>
    </tr>
    <tr>
      <td>
        <input type="text">
      </td>
      <td>
        <input type="text">
      </td>
      <td>
        <input type="text">
      </td>
    </tr>
    <tr>
      <td>
        <input type="text">
      </td>
      <td>
        <input type="text">
      </td>
      <td>
        <input type="text">
      </td>
    </tr>
  </tbody>
</table>

＆＃13;

我尝试使用CSS 2D变换和实际文本来达到同样的效果，但结果并不是特别好。

使用CSS转换和＆lt; table＆gt;进行实验：

＆＃13;

input {
  width: 24px;
  background-color: transparent;
  border: 1px solid gray;
  font-family: serif;
  font-weight: bold;
  text-align: center;
  font-size: 16px;
}
input {
  margin-right: 1em;
}
td:first-child input {
  margin-left: 1em !important;
}
td:last-child input {
  margin-right: 1em !important;
}
table {
  display: inline-block;
  vertical-align: middle;
}
span {
  font-family: 'Latin Modern Math';
  transform: scale(2, 4);
  font-size: 2em;
  display: inline-block;
  vertical-align: middle;
}

＆＃13;

<span>(</span>
<table>
  <tbody>
    <tr>
      <td>
        <input type="text">
      </td>
      <td>
        <input type="text">
      </td>
      <td>
        <input type="text">
      </td>
    </tr>
    <tr>
      <td>
        <input type="text">
      </td>
      <td>
        <input type="text">
      </td>
      <td>
        <input type="text">
      </td>
    </tr>
    <tr>
      <td>
        <input type="text">
      </td>
      <td>
        <input type="text">
      </td>
      <td>
        <input type="text">
      </td>
    </tr>
  </tbody>
</table><span>)</span>

＆＃13;

有什么方法可以更接近地匹配MathML代码的原始行为？我想知道基于SVG的解决方案是否会更好。

我知道MathML代码使用拉丁现代数学字体呈现括号，但我不确定如何拉伸括号以包围表格（无论其内容如何）。

Answer 1

我会制作两个括号图像（一个左边，一个右边）并将它们的高度设置为100％。通过这种方式，您可以绕过使用真实文本（以及font-size属性）。

然后将容器设置为position: relative，将图像设置为position: absolute; left(/right): 0px; top: 0px; height:100%;。如果您在右括号position: absolute; left:的左括号; right:宽度上写;宽度，则应该在两者之间。

希望有所帮助： - ）

桌子周围的圆括号（矩阵）

1 个答案: