我在 #mainContainer 和 HTML-body 之间看到了这条奇怪的黄色 (!) 线，但只在右边仅在 header/nav-section 下方。
发生在 Chrome 和 Firefox 中。
编辑: 在玩了很久之后，我摆脱了黄线。不知道为什么，但它现在不见了。我已将代码放在这里，以防有人遇到类似问题:
<!DOCTYPE html>
<html>
<head>
<title>navbar</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="mainContainer">
<header>
<h1>Test Webseite</h1>
</header>
<nav>
<ul id="menu">
<li><a href="#">test1</a></li>
<li><a href="#">test2</a></li>
<li><a href="#">test3</a></li>
<li><a href="#">test4</a></li>
<li><a href="#">test5</a></li>
</ul>
</nav>
<section>
Lorem ipsum
</section>
</div>
</body>
</html>
CSS:
html {
height:100%;
}
body {
margin: 0 auto;
padding: 0;
font-family: sans-serif;
background-color: #dedede;
width:700px;
height: 100%;
}
#mainContainer {
width: 100%;
min-height: 100%;
margin: 0;
padding: 0;
background-color: #ffffff;
}
header {
background: #00795f;
width: 100%;
padding: 40px 0;
color: white;
text-align: center;
}
nav ul {
background: #424242;
overflow: hidden;
color: white;
list-style: none;
margin: 0;
padding: 0;
text-align: center;
font-size: 0;
}
nav ul li {
display: inline-block;
font-size: 16px;
}
nav ul li:hover {
background-color: #399077;
}
ul li a {
text-decoration: none;
color: white;
display: inline-block;
padding: 12px 35px;
}
section {
box-sizing: border-box;
line-height: 1.7em;
font-size: 0.9em;
padding: 40px;
width: 100%;
min-height: 100%;
margin: 0 auto;
text-align: justify;
text-justify: inter-word;
}
最佳答案
我现在已经改变了一些颜色。现在白色区域旁边的黄线消失了。 但是在绿色标题区域的右侧有一条蓝线(如果您仔细观察)!
有人指出，这可能是一种视错觉。他们是对的吗？我觉得这有点难以置信。为什么它只在右侧而不是左侧？
<!DOCTYPE html>
<html>
<head>
<title>navbar</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="mainContainer">
<header>
<h1>Test Webseite</h1>
</header>
<nav>
<ul id="menu">
<li><a href="#">test1</a></li>
<li><a href="#">test2</a></li>
<li><a href="#">test3</a></li>
<li><a href="#">test4</a></li>
<li><a href="#">test5</a></li>
</ul>
</nav>
<section>
Lorem ipsum
</section>
</div>
</body>
</html>
CSS:
body{
margin: 0;
padding: 0;
font-family: sans-serif;
background-color: grey;
}
header{
background: green;
width:100%;
padding: 40px 0;
color: white;
text-align: center;
}
#mainContainer {
width: 95%;
max-width: 850px;
margin: 0 auto;
padding: 0;
background-color: #ffffff;
}
ul li a{
text-decoration: none;
color: white;
display: inline-block;
padding: 12px 35px;
}
nav ul{
background: #424242;
overflow: hidden;
color: white;
list-style: none;
margin: 0;
padding: 0;
text-align: center;
font-size:0;
}
nav ul li{
display: inline-block;
font-size:16px;
}
nav ul li:hover{
background-color: #399077;
}
section{
line-height: 1.7em;
font-size: 0.9em;
padding: 40px;
width: 75%;
margin: 0 auto;
text-align: justify;
text-justify: inter-word;
}
关于html - html 元素旁边奇怪的黄色 (!) 行，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/48418787/