代码不适用于顶部的<！DOCTYPE html>

问题描述：

我的页面顶部有<!DOCTYPE html>，页面应该做的是允许用户单击页面上的任意位置，然后重定向到另一个URL 。代码不适用于顶部的<！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>

为什么会发生这种情况？

拥有HTML5文档类型*和* xhtml''标签绝对没有任何意义。 *特别是*因为你有一个''标签，它也声明内容为HTML。摆脱那个'xmlns'属性，因为它是所有好的和小猫友好的。 – Pointy 2014-10-09 05:11:08

您应该只需添加'html，body {height：100％; }'到你的CSS – Phil 2014-10-09 05:11:55

或者我最喜欢的'height：100vh;宽度：100vw;' – Pointy 2014-10-09 05:13:38

答

欣赏@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>

复制和粘贴整个代码，并没有为我工作，我需要'手'，所以我用，但仍然没有工作 – 2014-10-09 14:20:02

@JoeBobby价值“手”将被除IE以外的所有浏览器忽略。值“指针”将做同样的事情。 – Pointy 2014-10-09 14:36:09

答

将身体的高度和宽度增加到100％。很可能它可能会解决这个问题。

答

你需要修复的功能性问题，使得整个区域点击，唯一的事情是设置

html, body { height: 100%; }

然而，这仍然留下小面积的边缘（缘的几个像素），所以如果你真的想整个视口被点击，添加

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

原因在于，在“标准模式”下，浏览器默认使body元素与其内容所需的高度一样高（正如您通过设置边框所看到的）。当缺少文档类型字符串时，浏览器在“quirks mode“中运行，在那里发生奇怪的事情，包括模仿旧浏览器，默认情况下使得body 100％高。如果你想在“标准模式”下使用，只需在CSS中说出来。

为了使指针（以CSS为cursor严重命名）看起来像所有的浏览器手或类似的图标，添加

body { cursor: hand; cursor: pointer; }

这种处理都非常旧版本的IE（其识别hand但不pointer）和现代浏览器，正确实施cursor。

代码不适用于顶部的<！DOCTYPE html>

相关推荐