浏览器与“的兼容性问题”；旧的；css和HTML5_Css_Html_Internet Explorer

浏览器与“的兼容性问题”；旧的；css和HTML5

css html internet-explorer

浏览器与“的兼容性问题”；旧的；css和HTML5,css,html,internet-explorer,Css,Html,Internet Explorer,我希望我的第二个帖子是ontopic。我的HTML和CSS技能几乎不存在，所以我试图通过我制作的一个错误页面来提高我的技能-或者更好地说，我试图制作有了最新的浏览器，就没有问题了。从Internet Explorer 8等旧浏览器开始出现的问题。我想我必须包括有条件的评论吗？但我不知道我到底要为这个版本的IE改变什么在IE8中，div容器的边界和高度的一半似乎被切掉了。我的页面如下所示： <!DOCTYPE html> <html lang="de-DE" dir="lt

我希望我的第二个帖子是ontopic。我的HTML和CSS技能几乎不存在，所以我试图通过我制作的一个错误页面来提高我的技能-或者更好地说，我试图制作

有了最新的浏览器，就没有问题了。从Internet Explorer 8等旧浏览器开始出现的问题。我想我必须包括有条件的评论吗？但我不知道我到底要为这个版本的IE改变什么

在IE8中，div容器的边界和高度的一半似乎被切掉了。我的页面如下所示：

<!DOCTYPE html>
<html lang="de-DE" dir="ltr">
<head>
<title>An error occured</title>
<meta charset="utf-8" />
<link href="https://fonts.googleapis.com/css?family=Montserrat:400,700" rel="stylesheet" type="text/css" />
<style>
* {
margin: 0;
padding: 0;
}

html, body {
background: white;
color: black;
}

#box {
border: 1px solid red;
position: absolute;
width: 250px;
height: 42px;
top: 50%;
left: 50%;
margin-top: -21px;
margin-left: -125px;
}

#box p {
font-family: Montserrat;
font-size: 2em;
font-weight: 400;
color: #202020;
}
</style>
</head>
<body>
<div id="box">
<p>Page not found</p>
</div>
</body>
</html>


发生了一个错误
* {
保证金：0；
填充：0；
}
html，正文{
背景：白色；
颜色：黑色；
}
#盒子{
边框：1px纯红；
位置：绝对位置；
宽度：250px；
高度：42px；
最高：50%；
左：50%；
利润上限：-21px；
左边距：-125px；
}
#方框p{
字体系列：蒙特塞拉特；
字号：2em；
字体大小：400；
颜色：#202020；
}
找不到页面

我的问题是：我想以后用一个图像或类似的东西扩展这个错误页面。但对于这一点，div容器必须是固定的，我可以确保每次显示都是正确的，即使是使用智能手机。因此，我还想为它包括一个视口。但是一步一步的

非常感谢您的帮助/支持！：-）

谢谢。

您的问题可能是此规则中

#box

的负

边距值
#box {
border: 1px solid red;
position: absolute;
width: 250px;
height: 42px;
top: 50%;
left: 50%;
margin-top: -21px;
margin-left: -125px;
}

你为什么不试试更传统的设置呢？有一件事已经完成了一半的工作，那就是使用margin:0auto
（不带位置：绝对；
）水平居中div：
#box {
position: relative;
top: 45%;
width: 250px;
height: 42px;
margin 0 auto;
border: 1px solid red;
}

top:45%
将div（仅42px高）置于垂直中间。如果以后添加图像，可以调整此设置。另外一个要求（水平对齐工作）是周围的容器（在本例中为
）获得位置：相对：
body {
  position: relative;
}

并添加此项，以使百分比高度具有高度参考：
html, body {
  height: 100%;
}

这些设置适用于最旧的旧浏览器，也适用于新浏览器…
谢谢回复。我对你的解决办法有意见。它不能正常工作。使用边距将其水平居中：0自动有效，但不适用于垂直对齐。我不知道为什么。我删除了所有不必要的代码：testtitle*{margin:0；padding:0；}body{position:relative；}box{border:1px纯红；position:relative；margin:0 auto；width:172px；height:42px；top:45%；}boxp{font size:2em；}Lorem ipsum
对不起，我忘了一件事：还要添加html，body{height:100%；}
（另请参见我的编辑）。这是一支代码笔：（注意我添加到标记的行高。）再次感谢您的帮助。：）我将html，body
和body
添加到body，html{height:100%；position:relative；}
现在它可以正常工作了。但原因是什么，不管我使用哪种字体，上边框和文本Lorem Ipsum之间都有一个空格。您的行高：2em
将文本放低或放在盒子外面。@sorcio在我的小提琴中，las CSS规则包含一个行高设置。如果您调整该值，你可以减少文本上方的空白。（顺便说一句：如果它现在有效，请将我的帖子标记为“接受答案”）