为什么一个细胞比其他细胞低？

时间：2016-06-18 16:32:37

标签： javascript html css3

我使用的是IE11，但在FF或Chrome中不存在此问题。它仅存在于分辨率为1366x768的IE10 / 11中。下面的屏幕截图显示了问题。

Screenshot

这是 jsFiddle 上的代码：

<table class="rvTable" role="presentation" style="line-height:1.25;border-collapse: collapse; min-width: 460px; background-color: transparent;">
  <colgroup>
    <col style="width: 151px;">
      <col style="width: 100px;">
        <col style="width: 56px;">

  </colgroup>
  <tbody>

    <tr>
      <td style="border-width: 1px medium 1px 1px; border-style: solid none solid solid; border-color: rgb(0, 0, 0) currentColor rgb(0, 0, 0) rgb(0, 0, 0); padding: 1px; height: 20px; vertical-align: middle; background-color: rgb(255, 255, 255);">
        <div class="rvParagraph pNormal" style="font-size: 13px;"><span class="rvTxt fNormal"><span class="forcedSpace"> </span><span class="forcedSpace"> </span>Years to</span><span class="xlPopupStep" data-dojo-attach-point="domNode" widgetId="PS5">
    <a name="PS5" tabindex="0" title="Definition" class="xlPopupLink" id="PS5" role="link" type="hyperlink" data-dojo-attach-point="_buttonNode, focusNode" text="maturity">maturity</a>
    <span data-dojo-attach-point="_dummyTextHolder"></span>
          <div class="xlPopupStepPopup" data-dojo-attach-point="containerNode">
            LOADING...</div>

          </span>
        </div>
      </td>
      <td style="border-width: 1px medium 1px 1px; border-style: solid none solid solid; border-color: rgb(0, 0, 0) currentColor rgb(0, 0, 0) rgb(0, 0, 0); padding: 1px; height: 20px; vertical-align: middle; background-color: rgb(255, 255, 255);">
        <div class="rvParagraph pNormal_24" style="font-size: 13px;"><span class="eqLabel fNormal" id="Y1" style="background-color: rgba(0, 0, 0, 0) !important;" aria-label="30" widgetId="Y1"><span class="eqAccessibleLabel">30</span><span class="eqDocument" role="presentation" aria-hidden="true"><span class="txtNum"><span>3</span><span>0</span></span>
          </span>
          </span>
        </div>
      </td>
      <td style="border-width: 1px 1px 1px medium; border-style: solid solid solid none; border-color: rgb(0, 0, 0) rgb(0, 0, 0) rgb(0, 0, 0) currentColor; padding: 1px; height: 20px; vertical-align: middle; background-color: rgb(255, 255, 255);">
        <div class="rvParagraph pNormal" style="font-size: 13px;"></div>
      </td>
      <td style="border-width: 1px medium 1px 1px; border-style: solid none solid solid; border-color: rgb(0, 0, 0) currentColor rgb(0, 0, 0) rgb(0, 0, 0); padding: 1px; height: 20px; vertical-align: middle; background-color: rgb(255, 255, 255);">
        <div class="rvParagraph pNormal_24" style="font-size: 13px;"><span class="eqLabel fNormal" id="Y2" style="background-color: rgba(0, 0, 0, 0) !important;" aria-label="20" widgetId="Y2"><span class="eqAccessibleLabel">20</span><span class="eqDocument" role="presentation" aria-hidden="true"><span class="txtNum"><span>2</span><span>0</span></span>
          </span>
          </span>
        </div>
      </td>
      <td style="border-width: 1px 1px 1px medium; border-style: solid solid solid none; border-color: rgb(0, 0, 0) rgb(0, 0, 0) rgb(0, 0, 0) currentColor; padding: 1px; height: 20px; vertical-align: middle; background-color: rgb(255, 255, 255);">
        <div class="rvParagraph pNormal" style="font-size: 13px;"></div>
      </td>
    </tr>
    <tr>
      <td style="border-width: 1px medium 1px 1px; border-style: solid none solid solid; border-color: rgb(0, 0, 0) currentColor rgb(0, 0, 0) rgb(0, 0, 0); padding: 1px; height: 20px; vertical-align: middle; background-color: rgb(255, 255, 255);">
        <div class="rvParagraph pNormal" style="font-size: 13px;"><span class="rvTxt fNormal"><span class="forcedSpace"> </span><span class="forcedSpace"> </span>Price</span>
        </div>
      </td>
      <td style="border-width: 1px medium 1px 1px; border-style: solid none solid solid; border-color: rgb(0, 0, 0) currentColor rgb(0, 0, 0) rgb(0, 0, 0); padding: 1px; height: 20px; vertical-align: middle; background-color: rgb(255, 255, 255);">
        <div class="rvParagraph pNormal_24" style="font-size: 13px;"><span class="rvTxt fNormal"><span class="wbr">​</span><span class="nowrap">?</span></span>
        </div>
      </td>
      <td style="border-width: 1px 1px 1px medium; border-style: solid solid solid none; border-color: rgb(0, 0, 0) rgb(0, 0, 0) rgb(0, 0, 0) currentColor; padding: 1px; height: 20px; vertical-align: middle; background-color: rgb(255, 255, 255);">
        <div class="rvParagraph pNormal" style="font-size: 13px;"></div>
      </td>
      <td style="border-width: 1px medium 1px 1px; border-style: solid none solid solid; border-color: rgb(0, 0, 0) currentColor rgb(0, 0, 0) rgb(0, 0, 0); padding: 1px; height: 20px; vertical-align: middle; background-color: rgb(255, 255, 255);">
        <div class="rvParagraph pNormal_24" style="font-size: 13px;">
          <div class="nowrap"><span class="rvTxt fNormal"><span class="wbr">​</span><span class="nowrap">$</span></span><span class="eqLabel fNormal" id="BP2" style="background-color: rgba(0, 0, 0, 0) !important;" aria-label="2 comma 249.46" widgetId="BP2"><span class="eqAccessibleLabel">2 comma 249.46</span>
            <span
            class="eqDocument" role="presentation" aria-hidden="true"><span class="txtNum"><span>2</span></span><span><span>,</span></span><span class="txtNum"><span>2</span><span>4</span><span>9</span><span>.</span><span>4</span><span>6</span></span>
              </span>
              </span>
          </div>
        </div>
      </td>
      <td style="border-width: 1px 1px 1px medium; border-style: solid solid solid none; border-color: rgb(0, 0, 0) rgb(0, 0, 0) rgb(0, 0, 0) currentColor; padding: 1px; height: 20px; vertical-align: middle; background-color: rgb(255, 255, 255);">
        <div class="rvParagraph pNormal" style="font-size: 13px;"></div>
      </td>
    </tr>
  </tbody>
</table>

3 个答案:

答案 0 :(得分：1)

这是因为您没有在桌子的每个单元格上声明明确的高度。

如果您希望在每个单元格使用的类之间使用相同的设计，并在css中进行描述。

你可以使用附近的东西：

<td class="myCell">your content</td>
<td class="myCell">your second td</td>

和css部分（样式表或标签）：

.myCell {
  height:1em;
}

答案 1 :(得分：1)

根据我的观察，这是一个浏览器问题，可以通过改变行高来解决。当前行高为1.25，并且仅针对无法用2精确分割的值发生问题。 （例如：1.23,1.25,1.27）。

答案 2 :(得分：0)

第一个单元格具有指定的精确高度，第二个单元格没有指定其自然发生的高度。如果你指望所有浏览器都以完全相同的大小渲染字体，那么你将度过一段美好的时光。因此要么给出明确的高度，要么从第一个单元格中省略它。

相关问题
最新问题