Question

有人可以帮我解决以下两种情况之间的差异。在这两种情况下，我都将图像分成几个部分，然后将它们放在一张桌子中，这样它仍然可以显示为单个图像。

但是，在一种情况下，我将doctype设置为，而在另一种情况下，没有设置doctype。当没有设置doctype（没有border-spacing或cellspacing或单元格和行之间的任何其他空格）时，会显示我的预期结果。但是，当设置doctype时，行之间会有1px填充。

除了doctype

之外，两种情况的HTML都是相同的

<!DOCTYPE html>
<html>
<head>
<style type='text/css'>
    .table{
        display: table;
    }

    .row{
        display: table-row;
    }

    .cell{
        display: table-cell;
    }
</style>
</head>
<body>
    <div id='slider' class='table'>
        <div class='row'>
            <div class='cell'><img src='slides/1/1_01.gif' alt='slide' /></div>
            <div class='cell'><img src='slides/1/1_02.gif' alt='slide' /></div>
            <div class='cell'><img src='slides/1/1_03.gif' alt='slide' /></div>
            <div class='cell'><img src='slides/1/1_04.gif' alt='slide' /></div>
            <div class='cell'><img src='slides/1/1_05.gif' alt='slide' /></div>
            <div class='cell'><img src='slides/1/1_06.gif' alt='slide' /></div>
        </div>
        <div class='row'>
            <div class='cell'><img src='slides/1/1_07.gif' alt='slide' /></div>
            <div class='cell'><img src='slides/1/1_08.gif' alt='slide' /></div>
            <div class='cell'><img src='slides/1/1_09.gif' alt='slide' /></div>
            <div class='cell'><img src='slides/1/1_10.gif' alt='slide' /></div>
            <div class='cell'><img src='slides/1/1_11.gif' alt='slide' /></div>
            <div class='cell'><img src='slides/1/1_12.gif' alt='slide' /></div>
        </div>
        <div class='row'>
            <div class='cell'><img src='slides/1/1_13.gif' alt='slide' /></div>
            <div class='cell'><img src='slides/1/1_14.gif' alt='slide' /></div>
            <div class='cell'><img src='slides/1/1_15.gif' alt='slide' /></div>
            <div class='cell'><img src='slides/1/1_16.gif' alt='slide' /></div>
            <div class='cell'><img src='slides/1/1_17.gif' alt='slide' /></div>
            <div class='cell'><img src='slides/1/1_18.gif' alt='slide' /></div>
        </div>
    </div>
</body>
</html>

当有人将doctype设置为HTML时，有人可以向我解释为什么行之间存在1px的差距吗？

Answer 1

@Shafee：试试 -

.row img {
    display: block;
}

修改

简短说明：使用DOCTYPE的代码在浏览器中触发严格模式，以不同方式处理图像显示。

更长的解释：

  在早期，实验用   严格模式总是提高了   评论图像突然得到了   奇怪的底部边缘，不可能   除去。原因是严格的   mode <img />是一个内联元素，   这意味着应该有一些空间   留作可能的下降器   像g，j或q这样的字符。当然   图像没有下降   人物，所以空间永远不会   使用过，但仍然需要保留。

解决方案是明确声明   图像块级元素：img {display: block}。

尽管如此，浏览器供应商Mozilla   特别是，认为这是一个这样的   令他们困惑的情况   介绍了“几乎严格的模式”。这个   被定义为严格模式，但有   图像继续是块，和   不是内联元素。

最常见的doctypes，包括   一个我使用，触发几乎严格的模式。   到目前为止，图像的处理   最重要的区别   几乎严格的模式，真的很严格   模式。

来源：http://www.quirksmode.org/css/quirksmode.html

Answer 2

删除元素周围的空格。

Answer 3

Charles Upsdell的site提供了有关DOCTYPE如何影响渲染的更多信息。

如何构建一个包含彼此相邻的所有行和单元格的HTML表格？

3 个答案: