开发者

Different between body { overflow hidden; } and #div { overflow hidden; }

i have a problem with overflow:hidden and the body tag. Here is a little exmaple

Body version (dont work)

<body style="border: 1px solid #ff0000; width:100%; height:200px; overflow:hidden;">
    <div style="width:50px; height:50px; border: 1px solid #0000ff; position:absolute; top-10px;"></div>
</body>

http://jsfiddle.net/5hGSp/13/

DIV version (works)

    <div style="border: 1px solid #ff0000; width:100%; height:200px; overflow:hidden;">
        <div style="width:50px; height:50px; border: 1px solid #0000ff; position:absolute; top-10px;"></div>
</div>

http://jsfiddle.net/5hGSp/12/

What is the problem?

When you 开发者_StackOverflowclick (middle mousekey) into the red area -> the mouse-software start the scrollfunction.

Different between body { overflow hidden; } and #div { overflow hidden; }

... but only in the "body version" !

Hope someone can help me.

Thanks in advance!

Peter

EDIT:

Sry, it is very hard to me to explain it in english. But i try it again.

1) Copy the code into an .*html file.

2) Open the file and click (middle mousekey) into the body tag (red area).

3) Did the mousescroll function start? ...did you see an scroll icon (for example from the logitech software?)

4a) if not, everything works fine

4b) you see the icon? You know how to disable? -> write a comment pls

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Unbenanntes Dokument</title>
<style type="text/css">
body {
    border: 1px solid #ff0000;
    width:100%;
    height:200px;
    overflow:hidden;
}
</style>
</head>

<body>
<div style="width:50px; height:50px; border: 1px solid #0000ff; position:absolute; top:-10px;"></div>
</body>
</html>


Nabab wrote:

Body is not a block element.

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜