Question

在Firefox 4和Chrome（未在其他浏览器中验证）中，表格单元底部有一个黑色小边框<!DOCTYPE html>（即html5模式）。拿出来（即怪癖模式），边框消失。我想知道如何在html5模式下使用无边框版本。我在样式表中遗漏了什么吗？

使用<!DOCTYPE html> 渲染时，底部有一个小的无意边框 html5

在没有<!DOCTYPE html> 的情况下渲染时，底部没有边框 quirk

由于

<!DOCTYPE html>
<html>
  <head>
    <style>
      table.icon {
        display: inline-table;
        border-collapse: collapse;
        border-spacing: 0px;
        text-align: center;
        vertical-align: middle;
        padding: 0px;
        margin: 2px 0px;
        border: hidden;
      }

      table.icon td.content {
        vertical-align: middle;
        background-color: black;
        width: 100px;
        height: 100px;
        padding: 0px;
        margin: 0px 0px;
        border: hidden;
      }

      .block {
        width:50px;
        height:100px;
        background-color: green;
      }
    </style>
  </head>
  <body>
    <table class="icon">
      <tr>
        <td class="content"><img class="block"></td>
      </tr>
    </table>
  </body>
</html>

Answer 1

我认为没有区别，但是：

图标不应为img元素，应为background images
包含一个单元格的表格为not a table at all
如果你想在某些东西的底部有一个边框（或者甚至想删除它），请使用border-bottom属性
无论有什么不同，你总是想要一个正确包含的doctype声明（你在这里做的很好）
HTML5中不需要type="text/css"元素的style属性
虽然在HTML5中无效，但在HTML中关闭img元素仍然很愚蠢，除非您要求代码具有XML一致性

在奇怪模式下表格单元格大小

1 个答案: