CSS 在 IE 7 及更高版本中放置 3 个没有边距的 div答案

【问题标题】：CSS place 3 divs without margin between them in IE 7 and upCSS 在 IE 7 及更高版本中放置 3 个没有边距的 div
【发布时间】：2011-06-12 10:34:38
【问题描述】：

我正在尝试创建一个面板。panelHeader、panelMiddle 和 panelFooter 都有一个 1px 高度的背景图像，并且在 panelMiddle背景图像在 y 中重复。在 chrome 和 mozilla 中，div 都平滑地将一个定位在另一个没有边距的底部。但是 在 IE 中（真是令人惊讶！）之间有一个边距标题和中间出现。有什么指导方针吗？谢谢

<div class="panelContainer">
        <div class="panelHeader"></div>
        <div class="panelMiddle">
            test<br/>
            test<br/>
            test<br/>
        </div>
        <div class="panelFooter"></div>
    </div>

编辑：css 代码

.panelContainer{  
    width: 300px; 
}

.panelHeader{  
    background-image:url(panelHeader.png);

    background-repeat: no-repeat;  
    width: 300px;  
    height: 1px;    
}

.panelMiddle{  
    background-image:url(panelMiddle.png);

    background-repeat: repeat-y;  
    width: 300px;   
}

.panelFooter{  
    background-image:url(panelFooter.png);

    background-repeat: no-repeat;  
    width: 300px;  
    height: 5px;
}

【问题讨论】：

我们也可以看看你的 CSS 吗？
请提供您的 CSS。
你的页面有文档类型吗？
我无法复制它$^%$&%@。在测试中我没有问题，但网页中的相同代码有问题。谢谢
哦，是的，我在 quirks mod 中运行毕竟不知道为什么。请在下面添加一个答案，以便我接受它，因为您是第一个找到问题的人。

标签： css internet-explorer html margin

【解决方案1】：

您的页面（显然）以 Quirks 模式运行。

借助我的评论 "Does your page have a doctype?"（以及我无法在非 Quirks 模式的页面上重现您的问题这一事实），您意识到了这一事实，然后您就能够解决问题。

这个答案感觉很傻。

【讨论】：

【解决方案2】：

我会将您的 CSS 修改为此（注意浮动和边距）：

.panelHeader{  
    background-image:url(panelHeader.png);
    background-repeat: no-repeat;  
    width: 300px;  
    height: 1px;
    float: left;  
    margin: 0;  
}

.panelMiddle{  
    background-image:url(panelMiddle.png);

    background-repeat: repeat-y;  
    width: 300px; 
    float: left;  
    margin: 0;  
}

.panelFooter{  
    background-image:url(panelFooter.png);
    background-repeat: no-repeat;  
    width: 300px;  
    height: 5px;
    float: left;  
    margin: 0;
}

IE 在边距和内边距方面有一些非常奇怪的行为，甚至在版本之间有所不同。我通常假设我需要为每个元素指定边距和填充规则，除非我首先设置了非常通用的重置规则。

【讨论】：

【解决方案3】：

为了正确编写 CSS 脚本，我总是重置整个 CSS 代码。我重置它的浏览器将具有相同的边距和填充。如果没有手动添加到您的 css 脚本中，某些浏览器（例如 IE）会自动添加边距。

这是我的 reset.css：

/* CSS Document */

/* Clear all styles */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-weight: inherit;
    font-style: inherit;
    font-size: 100%;
    font-family: inherit;
    vertical-align: baseline;}

/* remember to define focus styles! */
:focus {
    outline: 0;}

body {
    line-height: 1;
    color: black;
    background: white;}

ol, ul {
    list-style: none;}

/* tables still need 'cellspacing="0"' in the markup */
table{
    border-collapse: separate;
    border-spacing: 0;}

caption, th, td {
    text-align: left;
    font-weight: normal;}

blockquote:before, blockquote:after,
q:before, q:after {
    content: "";}

blockquote, q {
    quotes: "" "";}
/*Ceal all styles END */

然后在文件中将这个元数据放在标题中：

<link rel="stylesheet" href="css-styles/reset.css" />
<link rel="stylesheet" href="css-styles/all.css" />

请注意重置的 css 高于真正的样式表。随时纠正我糟糕的英语......

【讨论】：