Question

我正在制作一个使用WYSIWYG编辑器的页面。像大多数编辑一样，它将所有内容都放在“＆lt; p＆gt;”中标签

当图像具有100％的高度和宽度时，这会产生格式问题。

以下html显示了问题：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>No doc type</title>
    <style type="text/css">
        /* css reset */
        * {
            vertical-align: baseline;
            font-family: inherit;
            border: 0 none;
            outline: 0;
            padding: 0;
            margin: 0;
        }

        html{
            font-size:100%;
            height: 100%;
        }

        body{
            height: 100%;
            font-size:62.5%; /* Reduce to 10px base */
            font-family:Arial, Helvetica, sans-serif;
        }
    </style>
    </head>
    <body style="margin:0;">
        <div>
            <div style="width: 500px; height: 200px;">
                <div>
                    <div style="border:1px solid #000; padding: 0; width: 498px; height: 198px;">
                        <p>
                            <img style="height: 100%; width: 100%;" src="http://www.google.com/logos/newyears10.gif"/>              
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </body>
</html>

在firefox中，p标签实际上溢出了div。这使得100％高度的图像超过div的100％。

如果删除doctype，问题就解决了。我不太了解doctypes，但我认为我使用的是一个好的（我用Google搜索）。我认为不使用它是不好的。

任何人都知道如何使用doctype正确显示它？

由于

Answer 1

我不确定你在页面上做了什么，但调整段落高度会纠正输出。

div p{ height: 100%; }

Answer 2

正如Zurahn所写，设定p的高度将解决问题。

要了解这一点（并获得可能更适合您的其他变体）： 1.图像原生为311 x 137 2.因为p没有高度，所以图像可以计算出边界元素（p）的宽度，而不是高度。 3.因此图像变得与宽度一样大，并缩放图像 - 创建219px的高度然后，p依次伸展以适合图像。给p增加一个高度可以让图像知道应该达到100％的高度。然后它可以相应地缩放图像。哎哟，写得不太好：

但现在q是 - 为什么它不能从它的祖先那里获得高度 - 就像从祖先那里得到宽度一样？

这个问题的答案与浏览器破坏高度的方式有关，这反过来又与浏览器在允许溢出到宽度之前溢出到高度的东西有关。

Answer 3

我想我和你有同样的问题。 doctype html在页面底部添加了一个间距。这是一些解决方案。您可以向图像添加其中一个属性。

style="display:block"
添加align="absmiddle"
像style="float:left"

Doctype html问题

3 个答案: