我有两张图片:

  • left.jpg250px -by- 47px ,
  • right.jpg1px × 47px

  • 这些被放入同一表格行的两个单元格中:
  • left.jpg 进入 <img> 标签的左侧单元格,
  • right.jpg 进入正确的单元格,作为它的 background-image

  • 这是 HTML:
    <table>
      <tbody>
        <tr>
          <td><img src="left.jpg" /></td>
          <td background="right.jpg" width="100%"></td>
        </tr>
      </tbody>
    </table>
    

    CSS:
    * {
        margin: 0;
        padding: 0;
    }
    
    table {
        width: 100%;
        border-bottom: solid 1px black;
        border-collapse: collapse;
    }
    

    我做了一个 jsfiddle test page 。渲染结果存在问题:单元格是 52px 高而不是 47px ,这会在左侧单元格的图像下方创建一个白色 strip 。

    问题: 如何设置单元格高度 47px ,并消除白条?谢谢!

    更新: 这些都没有帮助:
    tbody { height: 47px; }
    tr { height: 47px; }
    td { height: 47px; }
    

    最佳答案

    图像显示为内联元素,并且在基线下方有一些空白。

    尝试:

    img {
        vertical-align: top;
    }
    

    http://jsfiddle.net/audetwebdesign/RL5AE/

    关于html - "img"中的 "td"和 "background-image"中的 "td"具有不同的高度,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/18721016/

    10-12 12:26
    查看更多