0

在这里， 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;
    }
4

3 回答 3

2

Include a CSS reset . It may be a browser problem .

于 2013-11-14T08:28:54.463 回答
0

它工作得很好。您需要做的就是将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>
于 2013-11-14T08:53:30.563 回答
0

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

添加到 CSS

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

请参阅此解决方案。=> div的高度错误，里面有img标签

于 2013-11-14T09:05:55.957 回答