Question

这里，div 定义应该与图像的高度相同。但我得到了额外的4个像素的高度。有谁知道为什么会这样？

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <link href="StyleSheet.css" rel="stylesheet" />
</head>
<body>
    <div class="container">
        <img src="29.jpg" />
        <div class="definition">
            DEFINITION GOES HERE
        </div>
    </div>
</body>
</html>

body {
    margin: 0;
}

html, body {
    height: 100%;
}

.container {
    position: absolute;
}

.definition {
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: red;
    opacity: 0;
}

    .definition:hover {
        opacity: 1;
        transition: 2s ease-in;
    }

Answer 1

包含CSS重置。这可能是一个浏览器问题。

Answer 2

它完美无缺。您需要做的就是将CSS代码放在

下

<style>

your codes

</style>

我已使用以下链接替换了您的img。它也是一个图像。

<img src="http://ww1.prweb.com/prfiles/2011/06/14/8571472/ingredients_icon-kerned.jpg" />

以原始尺寸显示。

完整代码

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <link href="StyleSheet.css" rel="stylesheet" />
</head>

<style>
body {
    margin: 0;
}

html, body {
    height: 100%;
}

.container {
    position: absolute;
}

.definition {
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: red;
    opacity: 0;
}

    .definition:hover {
        opacity: 1;
        transition: 2s ease-in;
    }
</style>
<body>
    <div class="container">
        <img src="http://ww1.prweb.com/prfiles/2011/06/14/8571472/ingredients_icon-kerned.jpg" />
        <div class="definition">
            DEFINITION GOES HERE
        </div>
    </div>
</body>
</html>

Answer 3

此问题是由默认的img标记边距引起的。

添加到css

.container img { display:block; float:left; }

请看这个解决方案。 =＆GT; Wrong height of div with img tag inside

包含另一个div的div和一个意外高度的图像

3 个答案: