Question

问题：在我调整浏览器大小之前，图像不显示，或者只显示每个图像的一小部分;每次重新加载页面时结果都是随机的。我可以获得10次不同的结果重新加载页面10次。

调整窗口大小后，页面会显示出与应该看起来完全相同的效果，即使将页面大小调整为原始大小，它也会继续工作。

在使用非常简单的网页遇到问题后，

js在这里小提琴（工作得很好）：

我发现我可以对我的网页来源进行的一项更改是删除

<!DOCTYPE html>

没有其他更改解决了问题，但删除该标记会修复它，100％。这是为什么？

HTML：

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style/style.css">
<title>Title</title>
<meta name="keywords">
<meta name="description" content="The GameMode Hub is a Minecraft Server Network bringing together all of Minecraft's best and brightest server owners to present the gaming community with the largest collection of Minecraft Servers in the world!">
<meta name="author" content="Jonathan Todd">

</head>

<body>
<div class="wrap">
    <!-- begin wrap :: this will keep all of the stuff neat and in one place -->
    <div class="login-screen bg-dirt">
        <!-- begin login screen, background dirt :: sets up a background for the login and styles it with a dirt tile and holds all login elements -->
    </div>
    <!-- end login screen, background dirt -->
    <div class="welcome-screen">
        <!-- begin welcome screen :: this will hold the elements within the welcome screen, mainly just a title and the two moving wall pieces -->
        <div class="wall-left">
            <!-- begin wall left :: must I explain this? It opens and closes with the other wall -->
            <img src="http://www.new.gamemode.org/images/wall_left.png">
        </div>
        <!-- end wall left -->
        <div class="wall-right">
            <!-- begin wall-right :: must I explain this? It opens and closes with the other wall -->
            <img src="http://www.new.gamemode.org/images/wall_right.png">
        </div>
        <!-- end wall right -->
        <img class="welcome-logo" src="http://www.new.gamemode.org/images/logo.png">
        <img class="welcome-shadows" src="http://www.new.gamemode.org/images/shadows_fast.png">
    </div>
    <!-- end welcome screen -->
</div>
<!-- end wrap -->
</body>
</html>

CSS：

/* Style Setup */
body, div {
margin:0;
padding:0;
-webkit-perspective:6500;
}
table {
border-collapse:collapse;
border-spacing:0;
}
fieldset, img {
border:0;
}
address, caption, cite, code, dfn, th, var {
font-style:normal;
font-weight:normal;
}
caption, th {
text-align:left;
}
h1, h2, h3, h4, h5, h6 {
font-size:100%;
font-weight:normal;
}
q:before, q:after {
content:'';
}
abbr, acronym {
border:0;
}
.wrap, html {
width:100%;
margin:0px;
padding:0px;
height:100%;
overflow:hidden;
}
/* Style Start */
 .bg-dirt {
}
.login-screen {
z-index:0;
}
.welcome-screen {
z-index:1;
width:100%;
height:100%;
}
.wall-left {
position:absolute;
z-index:2;
height:100%;
left:0px;
}
.wall-right {
position:absolute;
z-index:3;
height:100%;
right:0px;
}
.welcome-logo {
position:absolute;
z-index:4;
margin-left:auto;
margin-right:auto;
}
.welcome-shadows {
position:absolute;
z-index:5;
width:100%;
}

Answer 1

我不确定为什么会这样，但是：

不是标签。它说您的文档是HTML（版本5）。除非你知道自己在做什么，否则不应该删除它。如果没有它，浏览器会认为你正在使用html4，如果你仍然使用html 5认为可能会发生奇怪的想法。

尝试编写更多类似xml的代码。例如，我尝试关闭img标签的代码，它适用于我（最新的chrome @ mac os）：

    <div class="wall-left">
        <!-- begin wall left :: must I explain this? It opens and closes with the other wall -->
        <img src="http://www.new.gamemode.org/images/wall_left.png" />
    </div>
    <!-- end wall left -->
    <div class="wall-right">
        <!-- begin wall-right :: must I explain this? It opens and closes with the other wall -->
        <img src="http://www.new.gamemode.org/images/wall_right.png" />
    </div>

（请注意，img标签以/＆gt;结束）

Answer 2

甚至在问题上写下这样的标题也很遗憾。

html,body { height: 100%; width: 100%; }

修改

至于为什么删除doctype使它工作，老实说我不知道。但是，你的body元素上没有高度，因此最终可能会隐藏溢出它边界的东西（实际上是width: 100%; height: 0;）并且确实会这样做，尽管在陌生的地方，这就是为什么你的图像有时候截止。

我发现您已将html高度设置为100％，但您还需要将身高设置为100％。

打破我的页面！为什么？

2 个答案: