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

CSS reset を含めます。ブラウザの問題かもしれません。

于 2013-11-14T08:28:54.463 に答える
0

この問題は、デフォルトの img タグの余白が原因で発生します。

cssに追加

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

この解決策をご覧ください。=> 内部に img タグがある div の高さが間違っている

于 2013-11-14T09:05:55.957 に答える
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 に答える