Question

我的页面顶部有<!DOCTYPE html>，页面假设允许用户点击页面上的任意位置，然后重定向到另一个网址。

当我删除<!DOCTYPE html时它会起作用，但我想将其保留在页面中

这是代码：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>Untitled Document</title>

<style>
    BODY.enterPage{
      cursor:hand;
    }
</style>
<script>
  function goto(){
    location.href = "http://www.google.com"
  }
</script>
</head>

  <body class="enterPage" onclick="goto();">

  Your Content

</body>

</html>

为什么会这样？

Answer 1

将身体的高度和宽度添加到100％。最有可能它可以解决这个问题。

Answer 2

感谢@Pointy评论，另外，在CSS中进行以下更改：

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>Untitled Document</title>
        <style>
            body.enterPage {
                cursor: pointer;             //Not hand!
            }
            html, body {                     //Set document width/height to 100%
                width: 100%;
                height: 100%;
            }
        </style>
        <script>
            function goto() {
                location.href = "http://www.google.com"
            }
        </script>
    </head>
    <body class="enterPage" onclick="goto();">
        Your Content
    </body>
</html>

Answer 3

修复功能问题，使整个区域可点击，唯一需要设置

html, body { height: 100%; }

然而，这仍然会在边缘留下一些小区域（几个像素的边距），所以如果你真的希望整个视口可以点击，添加

html, body { margin: 0; padding: 0; }

原因是在“标准模式”下，浏览器默认使body元素与其内容一样高（正如您在其上设置边框所示）。当缺少doctype字符串时，浏览器会在“quirks mode“中运行，这会发生奇怪的事情，包括模仿旧版浏览器，默认情况下使body高100％。如果你想在“标准模式”中使用它，只需在CSS中说出来。

要使指针（在CSS中命名为cursor）在所有浏览器上看起来像手或类似图标，请添加

body { cursor: hand; cursor: pointer; }

这可以处理非常旧的IE版本（识别hand但不识别pointer）和现代浏览器，它们可以正确实现cursor。

代码在顶部不起作用

3 个答案: