css - Chrome 而非 IE 中的 Div 之间的垂直空间

标签 css html google-chrome

这是一个倒退的.. IE 工作而 chrome 不工作! 我在 chrome 中的 div 之间出现了奇怪的额外垂直空间。 IE 中的 div 按预期彼此齐平。

我最初有一个 min-height 属性,它导致了一些宽度错误,但把它去掉了。仍然不完全确定是什么导致了间距问题。

感谢任何帮助!谢谢大家,-BR

CSS

#container {
width: 100%;
}

#headerout {
width: 100%;
height: 100px;
background: #1240AB;
}

#header {
width: 1000px;
margin: auto;
}

.splitout {
width: 100%;
height: 225px;
}

.split {
width: 1000px;
margin: auto;
}

.content {
width: 750px;
margin: auto;
}

.white {background-color: #DDE3F0;}
.lightblue {background-color: #C9D5F0;}

#footerout {
width: 100%;
height: 30px;
background: #1240AB;
}

#footer {
width: 1000px;
margin-left: 25px;
}

标记

<!DOCTYPE HTML>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<meta charset='utf-8'>


</head>
<body>
<div id="container">
    <header>
        <div id="headerout">
            <div id="header">
                <p>Content<p>
            </div>
        </div>
    </header>

    <div class="splitout white">
        <div class="split">
            <div class="content">
                <p>content</p>
            </div>
        </div>
    </div>

    <div class="splitout lightblue">
        <div class="split">
            <div class="content">
                <p>content</p>
            </div>
    </div>
</div>

<div class="splitout white">
    <div class="split">
        <div class="content">
            <p>content</p>
        </div>
    </div>
</div>

</div>
<div id="footerout">
<div id="footer">
    <p>foot</p>
</div>
</div>

</body>
</html>

最佳答案

不要使用 css-reset。

更喜欢 normalize.css:http://necolas.github.io/normalize.css/

“原因”: https://stackoverflow.com/a/8357635/1518921

这有助于解决“错误”。

关于css - Chrome 而非 IE 中的 Div 之间的垂直空间,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23175168/

相关文章:

google-chrome - Chrome 84+ : A website wants to open this application: Handlers

除非我刷新,否则 JavaScript/Coffeescript 不会执行

html - 将鼠标悬停在右侧时,左侧 div 确实会减小宽度

具有不同单元格高度的 HTML 表格行

jquery - 定时 jquery/返回顶部 html css 链接

html - 设计 div 并排出现,并在空间不足时堆叠

CSS:全尺寸 div 显示浏览器滚动条

html - 在容器中水平居中宽图像,必要时向左/右裁剪

css - 在 Chrome 中打印时 Div 元素大小发生变化

javascript - 如何使用 chrome 扩展在用户的文件系统上创建用户可访问的文件